Wie kommt die Mathematik ins Web? Obwohl HTML maßgeblich von einem Physiker entwickelt wurde, können wir der Auszeichnungssprache und mathematischen Symbolen kein allzu inniges Verhältnis nachsagen. Zwar ist der Bedarf, wissenschaftliche Belege, Masterabschlüsse oder gar Dissertationen direkt in HTML zu verfassen, (momentan noch) überschaubar, dennoch kann der Einsatz von Grafiken – wie z. B. auf Wikipedia – als Ersatz für eine native Unterstützung (optimal in LATEX-Syntax) nicht überzeugen. Jeder, der nachträglich einmal Änderungen an Formeln vornehmen mußte, weiß, wovon ich rede.
Aber es gibt Grund zur Hoffnung: HTML5 erlaubt fast nach Belieben Formeln mit MathML-Tags via <math>…</math> innerhalb des body-Bereichs einer normalen Webseite einzubinden.
Presentation Tags und Content Tags
Grundsätzlich wird in MathML zwischen zwei Arten von Tags unterschieden:
- »Presentation Tags« ermöglichen das Setzen von Formeln in HTML-Seiten als mathematische Notation. Sie können mittels CSS und zugehörigen MathML-Attributen näher beschrieben werden. Mehr braucht es fortan nicht, um in Webseiten wissenschaftliche Formeln einzubauen.
- »Content Tags« codieren die Bedeutung mathematischer Formeln und Ausdrücke. Sie lassen sich programmatisch auswerten – sind für das pure Layouten aber zu geschwätzig. Das Ergebnis könnte dann etwa für das Quadrat der Variablen x so aussehen:
<apply>
<power/>
<ci type="real">x</ci>
<ci type="integer">2</ci>
</apply>
<ci>
<msup>
<mi>x</mi>
<mi>2</mi>
</msup>
</ci>
Browser mit MathML-Unterstützung
Grau bleibt alle Theorie, wenn ein praktischer Einsatz an den Browsern scheitert. In ihren jeweils aktuellen Versionen können Firefox & Co. Formeln mit MathML in Webseiten darstellen. Safari bringt halbwegs akzeptabel MathML auf Mac, iPhone und iPad (Probleme gibt es z. B. mit der Darstellung von Klammern). Firefox und Opera zeigen Formeln mit MathML innerhalb einer HTML5-Webseite korrekt an, in IE9 und Chrome erscheinen diese als flacher Text. Allerdings existiert für den Internet Explorer ein Plugin für MathML.
 3+ |
 24+ |
 5.1+ |
 7+ (mit Plugin) |
 9.5+ |
Die in XML-Derivaten gängige Praxis des Ablegens der Inhalte in logischen Strukturen treffen wir auch in MathML an. Da die üblichen Verdächtigen unter den Editoren sich bezüglich der Integration dieses Dokumentenformates bislang bedeckt halten, bedeutet dies natürlich einen gehörigen Eingabeaufwand.
Die Anzeige des math-Tags kann global durch CSS geändert werden.
math { font-size: large; color: navy; display: block; }
Tabelle mit MathML-Tags
Für Variablen, Operatoren, Zahlen und Konstante werden verschiedene Tags verwendet, um ihre Typographie zu individualisieren. Variablen werden z. B. kursiv gesetzt, Operatoren brauchen etwas mehr padding rechts und links. Die Sonderzeichen der Mathematik werden mit HTML-Entities wie ∫ (Integral) und ∑ (Summe) geschrieben.
Fast alle MathML-Tags lassen sich durch die Attribute class, id, style, dir, href, mathbackground und mathcolor erweitern. Die nachstehende Tabelle wie auch die entscheidende Anregung zu diesem Beitrag habe ich bei mediaevent.de gefunden. Sie zeigt die individuellen Attribute der einzelnen MathML-Tags.
| MathML Tag | Funktion | Attribute |
|---|---|---|
| <mrow> | gruppiert Ausdrücke mit einem oder mehr Operatoren und ihren Operanden. mrow erzeugt eine horizontale Zeile – ähnlich dem tr-Tag in HTML. | |
\[1+2=3\]
<math>
<mrow>
<mn>1</mn><mo>+</mo><mn>2</mn>
<mo>=</mo><mn>3</mn>
</mrow>
</math>
|
||
| <mi> | eine Bezeichnung, z.B. Name einer Funktion, Variablen oder eine Konstante. | mathsize (small, normal, big, length), mathvariant (normal, bold, italic, bold-italic, double-struck, bold-fraktur, script, … ) |
\[\text{e}=2,7182818\ldots\]
<math>
<mi>e</mi><mo>=</mo><mn>2,7182818…</mn>
</math>
|
||
| <mo> | Operator im weitesten Sinne, dazu zählen auch Klammern, Kommas und Semikolons | accent, fence, form, largeop, lspace, mathbackground, mathcolor, mathsize, mathvariant, maxsize, minsize, movablelimits, rspace, spearator, stretchy, symmetric |
| Eulersche Zahl e mit MathML \[\text{e}=\displaystyle\lim_{n\to\infty}\left(1+\frac1{n}\right)^n\] <munder>
<mo>lim</mo>
<mrow>
<mn>n</mn>
<mo>→</mo>
<mn>∞</mn>
</mrow>
</munder>
|
||
| <mfenced> | öffnende und schließende Klammern und Trenner wie Kommas oder Semicolons | open, separators |
\[\{0.815,0.32168,1.2345,47.11\}\]
<math>
<mfenced open="{" close="}" separators=",">
<mi>0.815</mi><mi>0.32168</mi>
<mi>1.2345</mi><mi>47.11</mi>
</mfenced>
</math>
|
||
| <mn> | Literal, meist eine Folge von Ziffern mit Separator (Punkt oder Komma) oder ein Text, der für eine Zahl steht | mathsize, mathvariant |
| \[0\\4711\\\text{GgT}\] | ||
| <mroot> | Wurzel mit Index | close |
| Umrechnung von XYZ nach Lab \[L^{*}=\displaystyle 116*\sqrt[3]{\frac{Y}{Y_n}}-16\] |
||
| <msqrt> | Quadratwurzel ohne Index, nur ein Argument | close |
| \[\sqrt{x}\] | ||
| <mfrac> | Brüche | bevelled (nebeneinander oder untereinander), denomalign, linethickness, numalign |
\[\displaystyle\frac{a}{b}\]
<mfrac bevelled="true"> <mi>a</mi> <mi>b</mi> </mfrac> |
||
| <msubsup> | Element mit Superskript und Subskript; Natation ist <msubsup> base subscript superscript </msubsup> |
subscriptshift, superscriptshift |
\[\int_0^\infty\text{e}^{-x}\;\text{d}x=1\]
<msubsup> <mo>∫</mo> <mn>0</mn> <mi>∞</mi> </msubsup> |
||
| <mtable> | Tabelle oder Matrix. Innerhalb eines mtable-Tags dürfen nur mtr- und mtd-Tags liegen (ähnlich wie tr- und td-Tags im table-Tag). | alignmentscope, columnalign, columnlines, columnspacing, columnwidth, displaystyle, equalcolumns, equalrows, frame, framesspacing, groupalign, minlabelspacing, rowalign, rowlines, rowspacing, side, width |
| \[\left[\begin{array}{c}X\\Y\\Z\end{array}\right]=\left[\begin{array}{lll}0.412453&0.357580&0.180423\\0.212671&0.715160&0.072169\\0.019334&0.119193&0.950227\end{array}\right]*\left[\begin{array}{c}R\\G\\B\end{array}\right]\] | ||
Gut, nun mal Butter bei die Fische. Da der visuelle Editor von WordPress mit der Codierung der MathML-Syntax mir etwas Kopfzerbrechen bereitet, habe ich kurzentschlossen das MathJax-LATEX-Plugin installiert, weshalb die hier gelisteten Beispiele im Quelltext auch nicht die vorgestellten MathML-Tags zeigen, dafür aber über das Kontextmenü zu den mathematischen Symbolen die erweiterten Funktionen von MathJax erreichbar werden.
Wenn, wie im folgenden Beispiel, die Formeln komplexer sind, ist das Einbetten in LATEX-Syntax unter Verwendung von MathJax deutlich handlicher und robuster als MathML. Wird dieser dennoch benötigt, kann er (wie oben dargestellt) komfortabel über das zugeordnete Auswahlmenü ausgegeben werden. Rufen wir nun noch mit den beiden Tags <figure>…</figure> und dem optional einzubindenden <figcaption>…</figcaption> für Bildunterschriften zwei weitere Neuerungen aus HTML5 auf, verströmt unser Dokument sogar einen leichten „Taste of LATEX“.
b_{k} &=& \frac{1}{\pi}\int_{-\pi}^{\pi}f(t)\sin(kt)\;\text{d}t=\frac{2}{\pi}\int_{0}^{\pi}f(t)\sin(kt)\text{d}t\\
&=& \frac{2}{\pi}\Bigg[-\frac{\cos(kt)}{k}\Bigg]_{0}^{\pi}=\frac{2}{\pi}\Bigg(\frac{1}{k}-\frac{\cos k\pi}{k}\Bigg)=\begin{cases}0 & \mbox{für }k\mbox{ gerade}\\4/(k\pi) & \mbox{für }k\mbox{ ungerade}\end{cases}\ .
\end{eqnarray*}$$
Ausführliche Informationen zur vorgestellten Thematik gibt’s natürlich auf den entsprechenden Seiten des W3C.
Quellen
[1] Mathematical Markup Language (MathML) Version 3.0
[2] MathJax features and benefits