MathML formatieren: Schrift, Farbe, Zeilenumbrüche

MathML direkt einsetzen

MathML wurde bereits 1998 eine WC3 Recommendation und kann seit HTML5 direkt sowohl in HTML-Seiten als auch in EBooks (im EPUB-Format) integriert werden. Die Browserunterstützung für MathML zeigte allerdings große schwarze Löcher, denn Chrome zog zwischenzeitlich MathML wieder ab. Heute können wir uns endlich auf die Interpretation von Formeln in den modernen Browsern verlassen.

\sqrt{x + y}

<math>
	<msqrt>
		<mi>x</mi><mo>+</mo><mi>y</mi>
	</msqrt>
</math>

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

\sum_{k = n}^{m} a(k)

<math display = "inline">

\sum_{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 \to 0} \frac{1}{x}$ geht gegen Unendlich.

<mo>lim</mo>

$lim_{x \to 0} \frac{1}{x}$ geht gegen Unendlich.

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

\sum_{x}^{0} = \sum_{x}^{0} = \sum_{x}^{0} = \sum_{x}^{0} = \sum_{x}^{0} = \sum_{x}^{0}

mathcolor und mathbackground

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

<mstyle mathbackground="ivory" mathcolor="navy" mathsize="1.2em"
        mathvariant="bold">

x = \frac{X}{X + Y + Z}

L^{*} = 116 \times \sqrt[3]{\frac{Y}{Y_{n}}} - 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 \times \sqrt[3]{\frac{Y}{Y_{n}}} - 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 = \frac{f^{2}}{a \cdot z} mm

Brennweite (mm) hoch 2 ÷ Blendenzahl × Größ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.

MathJax für Formeln

Für einige Jahre war die JavaScript-Library MathJax der einzige Weg, um die digitiale Schmiererei in Bitmap-Bildern zu ersparen.

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>

Das MathML muss für den Einsatz von MathJax nicht geändert werden: Wenn der Browser MathML unterstützt, kommt die Library nicht zum Zug. Um auf Nummer Sicher zu gehen ohne MathJax für alle Browser zu laden, kann die Library mit JavaScript nachgeladen werden. Das Skript erzeugt ein MathML-Fragment und prüft, ob das Fragment im Browser mit einer sichtbaren Höhe gerendert würde.

\frac{1}{2}

1

<script>
function hasMathMLSupport() {
  const div = document.createElement("div");
  div.style = "visibility:hidden";
  div.innerHTML = '<math><mfrac><mn>1</mn><mn>2</mn></mfrac></math>' +
                  '<math><mn>1</mn></math>';
  document.body.appendChild(div);
  return div.firstElementChild.firstElementChild.getBoundingClientRect().height > 
         div.lastElementChild.firstElementChild.getBoundingClientRect().height + 1;
}

console.log("hasMathMLSupport", hasMathMLSupport());

if (!hasMathMLSupport()) {
	const script = document.createElement("script");
	script.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";
	document.body.appendChild(script);
} 
</script>