Questa pagina in rete...
In rete anche http://www.elegio.it/calcolatrice/frazione-con-css.html ...
con SVG solo per Firefox

Come scrivere frazioni in HTML + istruzioni di stile CSS

Ringrazio innanzi tutto, chi ha scritto questa pagina illuminante:

http://users.fmg.uva.nl/rgrasman/jscript/2008/07/fractions-in-html.html
So I finally found a way to put (mathematical) fractions inline in HTML....

Ecco un esempio, tra gli infiniti possibili, di come funziona la sua proposta:

Compute 3 · 1 + x 400 + k  + 399 41  without your pocket calculator!


Qualche altro esempio:

∂ x f(x,y)   oppure: 12·π   o, ancora per esempio : 4·π3   o anche: akbk   o anche: gi,k3m

Si fa così: mettere all'inizio del file, all'interno della marca <head>, la seguente dichiarazione di stile CSS ( marca <style> ) :
<html><head>
<style>
.fr { display: inline-block; vertical-align: middle;
            font-size: 90%; text-align: center;}
.fr span { display: block; }
.fd { padding-top: .05em; border-top: .125em black solid; }
</style>
....
E usare la classe fr e l'ausiliaria classe fd in questo modo:
<span class="fr"><span>∂</span><span class="fd">∂ x</span></span>

Fino ad ora io avevo risolto questo problema usando un metodo più complicato e pensato per scrivere formule isolate e non solo frazioni inserite nel testo.
Illustro il mio metodo che può essere adottato in alternativa ( se lo si ritiene opportuno). Scrivo la formula in rosso:

1
2·π
0.159154943 ; 4·π
3
4.1887902

Le istruzioni di stile che consigliavo ( e magari consiglio ancora ) sono queste:
<style>
th { font-weight:normal ; color:red }
div { border-top: 1px solid }
.fb { border-bottom :1px solid }
.ft { border-bottom :1px solid }
/* La classe ar serve per fonti tipo arial */
.ar { font-family: Arial Unicode MS, Lucida Sans Unicode}
em { font-style:normal; font-family:Arial Unicode MS, Lucida Sans Unicode}
</style>


Dato il fine didattico di questa pagina sto mostrando anche come definire la classe ar per usare la fonte Arial e come ridefinire lo stile della marca <em> che se usata in modo standard genererebbe testo scritto in italico o corsivo che dir si voglia.
Comunque personalmente, per ragioni di concisione, io preferisco modificare lo stile di alcune marche piuttosto che definire classi ad hoc. Qui ridefinisco lo stile della marca <th> che va usata entro la marca <tr> usata entro la marca <table> e lo stile della marca <div>. A solo titolo di esempio ho riportato anche come definire la classe fb per generare la linea di frazione sotto il testo e la classe ft per generare la linea di frazione sopra il testo.
Chiarito questo, per ottenere le formule scritte in rosso ho usato queste istruzioni HTML:

<table><tr><th>1<div>2·π</div></th><th>≈</th><th>0.159154943 ;</th>
<th>4·π<div>3</div></th><th>≈</th><th>4.1887902</th>
</tr></table>

In parole povere ho realizzato una tabella di una sola riga. Il vantaggio di questa strategia è che quando la frazione diventa una espressione piuttosto alta, le regole della marca <table> consentono di centrare automaticamente la frazione in senso verticale e dunque posso mettere sia a numeratore che a denominatore espressioni complicate, per esempio ricche di indici e pedici.

Per concludere consiglio di guardare il sorgente HTML di questa stessa pagina e di verificare come concretamente ho applicato quanto ho suggerito.