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.

18-12-15 SITEMAP

MathJax für Formeln

Die Browserunterstützung für MathML zeigt war große schwarze Löcher, aber dank MathJax bleibt uns in Zukunft die digitiale Schmiererei in Bitmap-Bildern erspart.

MathJax-Logo
Auch mit MathJax funktionieren die MathML-Attribute für Farben und Schriftgrößen.
<script async 
        src="https://cdn.rawgit.com/mathjax/MathJax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">

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
o x = o x = o x = o x = o x = o x movablelimits = "true" movablelimits = "false" movablelimits = "true" displaystyle = "true" movablelimits = "false"

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× YYn3-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="firebrick">L</mi><mn>*</mn>
</msup>
<mo>=</mo><mn>116</mn><mo>×</mo>
<mroot>
   <mfrac mathbackground="gainsboro">
      <mi mathcolor="rgb(0,150,0)">Y</mi>
      <msub>
         <mi mathcolor="rgb(0,150,0)">Y</mi>
         <mn>n</mn>
      </msub>
    </mfrac>
    <mn>3</mn>
</mroot>
<mo>-</mo><mn>16</mn> …

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 · z mm
Brennweite (in mm) hoch 2 geteilt durch die 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.