HTML-Hajen

Matematiske ligninger med HTML









Problemet

Matematiske formler skrevet i HTML er et af de områder hvor der ikke har været lavet så meget udvikling. Heller ikke til HTML 5. Til hjemmesider ser man derfor forskellige work arounds, af mere eller mindre elegant karakter. Til formler har man flg. muligheder:


Brug af tabeller

At bygge matematiske formler med tabeller er st spørgsmål om at tænke i celler der er fusionerede eller ej, og om tabellen er inline eller ej.

Hvis vi starter med inline, så er det f.eks. hvis man i et sætning vil skrive to tal over hinanden, som ved isotopen
2
1
H, eller brøken
1
x
. Her benytter man sig af den style der hedder display:inline-table, og herfra er det blot en tabel som alle andre.

Hvis vi ser på de to eksempler, er koderne hhv.

<TABLE STYLE="display:inline-table; font-size:65%; border-collapse:collapse; vertical-align:middle"><TR><TD STYLE="padding:0px">2</TD></TR> <TR><TD STYLE="padding:0px;">1</TD></TR></TABLE>H


og

<TABLE STYLE="display:inline-table; font-size:65%; border-collapse:collapse; vertical-align:middle"><TR><TD STYLE="padding:0px; border-bottom: solid 1px; width:8px; text-align:center">1</TD></TR> <TR><TD STYLE="padding:0px; text-align:center">x</TD></TR></TABLE>


Som koderne er skrevet ud her, fylder de meget, og ser lidt komplicerede ud. Normalt vil man definere nogle klasser i stedet, så det er lettere at arbejde med.


De større formler kræver større tabeller, og man har dem ikke inline, men i bund og grund gør man det samme. Hvis vi ser på formlen for eddikesyres syrestyrkekonstant, som ser således ud:

Ka = [H+] · [CH3COO]
[CH3COOH]


Så er det blot en tilpasset tabel med tekst. Hvis man viser cellekanterne, træder det tydeligt frem:

Ka = [H+] · [CH3COO]
[CH3COOH]

Fordelen ved at bruge tabellerne i forhold til billeder eller MathJax er, at formlerne skalerer pænt, og bliver pæne og læselige, både på skærmen og ved udskrifter, og som det ses, bibeholder man fonten fra teksten i formlerne, så man får et pænt og helstøbt visuelt indtryk, når man læser siden.


MathJax

MathJax er en API (application programming interface), dvs. et eksternt program/værktøj, man kan kalde, ligesom andre script. For at få det til at fungere, skal man i sin HEAD tag have disse to linjer:

<SCRIPT SRC='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></SCRIPT>
<SCRIPT>MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}})</SCRIPT>


Herfra er det bare at skrive den rigtige kode til formlerne, og så konverterer MathJax det til læselige formler, når siden åbnes. I stedet for en start og slut tag bruger man $$ før og efter. Så hvis man skal skrive formlen for løsning af andengradsligninger, ser koden således ud:

$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$


På skærmen kommer den til at se således ud:

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$


Man kan på MathJax' egen hjemmeside og diverse tutorials finde instruktion om hvad kommandoerne hedder for de forskellige tegn og figurer, hvis man vil bruge denne løsning. Hvis man kan leve med de eventuelle forsinkelser der måtte være fra MathJax' server, og at man får en anden typografi i sine formler end i selve teksten (eller omvendt vælger en font der ligner den der bruges i formlerne), er MathJax bestemt en god løsning til formler.