MathJax für Formeln
MathML wurde bereits 1998 eine WC3 Recommendation und kann seit HTML5 direkt in HTML-Seiten integriert werden. Die Browserunterstützung für MathML zeigt allerdings große schwarze Löcher (direkte Unterstützung mit Firefox und Safari, keine Unterstützung von Chrome, Opera und EDGE), aber dank MathJax bleibt uns die digitiale Schmiererei in Bitmap-Bildern erspart.
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
Formeln im Text: display="inline"
display="inline" setzt Formeln ohne Hoch- oder Tiefstellung in die Zeile: ist eine Kurzschreibweise für das Produkt a(n) + a(n+1) + a(n+2) + … + a(m-1) + a(m).
<math display="inline"> <munderover> <mo>∑</mo> <mrow> <mi>k</mi><mo>=</mo><mn>n</mn> </mrow> <mi>m</mi> </munderover> <mi>a(k)</mi> </math>
Die Wirkung von display="inline" weicht also von CSS display: inline ab. Das math-Tag führt von Haus aus nicht zu einem Zeilenumbruch, aber damit ein mathematischer Ausdruck innerhalb einer Zeile nicht durch Super- und Subscripts zu hoch wird, muss display="inline" explizit gesetzt werden.
display="block" hingegen setzt das math-Tag in eine neue Zeile und rendert Indizes hoch- bzw. tiefgestellt.
<math display = "block">
<math display = "inline">
<math display="block"> <munderover> <mo>∑</mo> <mrow> <mi>k</mi><mo>=</mo> <mn>n</mn> </mrow> <mi>m</mi> </munderover> <mi>a(k)</mi> </math>
Dann sitzen hoch- und tiefgestellte Indizes unter und über dem Summenzeichen.
movablelimits
munderover ist nur die halbe Miete für Inline-Formeln. Das movablelimits-Attribut versetzt Indizes.
<math display="inline"> <munder> <mo movablelimits="true">lim</mo> <mrow> <mi>x</mi> <mo>→</mo> <mn>0</mn> </mrow> </munder> <mo>⁡</mo> <mfrac> <mn>1</mn> <mi>x</mi> </mfrac> </math>
geht gegen Unendlich.
<mo>lim</mo>
geht gegen Unendlich.
<mo movablelimits = "true">lim</mo>
mathcolor und mathbackground
Stile für das komplette math-Element ändern mit mstyle
<mstyle mathbackground="ivory" mathcolor="navy" mathsize="1.2em" mathvariant="bold">
mathcolor und mathbackground können auf alle Elemente angewendet werden – vom math-Tag selbst bis hin zu mi- und mo-Tags.
<math> <msup> <mi mathcolor="#6B2E36">L</mi><mn>*</mn> </msup> <mo>=</mo><mn>116</mn><mo>×</mo> <mroot> <mfrac mathbackground="#dedede"> <mi mathcolor="#20463e">Y</mi> <msub> <mi mathcolor="#20463e">Y</mi> <mn>n</mn> </msub> </mfrac> <mn>3</mn> </mroot> <mo>-</mo><mn>16</mn> … </math>
mathsize
Schriftgröße in MathML wird mit denselben Bordmitteln festgelegt wie im klassischen HTML: als em, px, % oder pt.
<math displaystyle="true" mathcolor="purple" mathsize="1.4em"> … </math>
Gruppen formatieren: mstyle
Ähnlich wie ein div in HTML oder ein g in SVG transportiert ein mstyle-Tag Formierungen in einen Teil einer Grafik.
<math> <mstyle displaystyle="true" mathcolor="teal"> <mi>x</mi><mo>=</mo><mfrac><mi>X</mi><mi>X + Y + Z</mi> </mstyle> </math>
Abstand zwischen Operatoren und Operanden
Leerzeichen oder Blanks innerhalt und zwischen Math-Tags hat keine Wirkung (auch nicht in mtext-Elementen). MathML fügt automatisch einen Abstand oder Freiraum zwischen mo-Elementen ein und explizit durch mspace. Die Größe des Abstands zwischen mo-Elementen basiert auf der Position im Container und dem Inhalt des mo.
Zwei mi-Elemente in einer Zeile bekommen also keinen Weißraum in MathML (anders als mit Tex!)
Abstand mit mspace einfügen:
<mspace depth="0.5ex" height="0.5ex" width="1ex"/>
- width
- Breite des Abstands.
- height
- Höhe über der Grundlinie
- depth
- Höhe unter der Grundlinie
Alternativ zu mspace gibt es mpadded, um Weißraum um Elemente einzufügen.