Matematiske ligninger med HTML

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:

• Billeder af formler, lavet med en formeleditor i f.eks. Open Office eller Office 365. Det er en let løsning i forhold til at kunne indsætte med en IMG-tag. Redigering er til gengæld noget besværlig, fordi man skal over flere programmer. Visuelt bliver det sjælden særligt pænt.
• Tabeller. Ved at være lidt kreativ med opbygningen af tabeller, evt. sammen med lidt SVG, kan man opnå et visuelt flot resultat. Metoden er lidt tidskrævende, til man får opbygget et bibliotek af formler man bruger. Til gengæld kan redigering være rigtig let, og nok så vigtigt, er der ingen begrænsninger på hvad man kan lave.
• MathML. Som en del af HTML 5 har man tag'en MATH, hvormed man med en række matematisk tags kan bygge formler. Den grundliggende idé er god, og resultatet bliver pænt, på de browsere som kan bruge tag'en. Desværre er det ikke alle browsere der kan håndtere tag'en. Lige pt. er det kun Firefox og Opera der håndterer tag'en rigtigt. Safari gør det delvis rigtigt. Reelt der denne løsning pt. ikke brugbar.
• MathJax. For at omgå begrænsningerne i formler, er der startet et open-source projekt, som kan lave formler, baseret på JavaScript. Der er nogle begrænsninger i hvad man kan vise, og man er underlagt de skrifttyper der følger med. Ligeledes skal man være opmærksom på, at der ved åbningen af siden er et API kald. API kald, kan give forsinkelser på visninger af sider, især fordi MathJax ikke loader asynkront (dvs. hvis de andre ting der loades skal vente på at opkaldet til MathJax er på plads).

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.



og



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:



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


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 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:



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:



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



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.