MathML formatieren

Math ML in HTML-Seiten

Dank HTML5 können wir mathematische Formeln direkt in Webseiten integrieren. Obwohl wir auch CSS zur Darstellung heranziehen können, spielen die MathML-Attribute eine große Rolle. Anders als HTML sind Formeln individuell und Attribute werden genauso wie bei SVG direkt in die Tags geimpft.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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.

MathJax-Logo
Auch mit MathJax funktionieren die MathML-Attribute für Farben und Schriftgrößen.
<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">
k = n m a(k)
<math display = "inline">
k = n m a(k)
<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>

lim x 0 1 x geht gegen Unendlich.

<mo>lim</mo>

lim x 0 1 x geht gegen Unendlich.

<mo movablelimits = "true">lim</mo>

x0 = x0 = x0 = x0 = x0 = x0
mathml movable limits Beispiele

mathcolor und mathbackground

Stile für das komplette math-Element ändern mit mstyle

<mstyle mathbackground="ivory" mathcolor="navy" mathsize="1.2em"
        mathvariant="bold">
x=XX + Y + Z
L* =116× Y Yn 3 - 16

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>
L*=116× YYn3-16

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.

hyfd = f 2 a · zmm
Brennweite (mm) hoch 2 ÷ Blendenzahl × Größe des Zerstreuungskreises

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.