CSS, HTML und Javascript mit {stil}

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 werden.

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.

Auch mit MathJax funktionieren die MathML-Attribute für Farben und Schriftgrößen.
<script type="text/javascript"
  src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</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
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

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 bringt ein mstyle-Tag eine Formierung 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>