CSS, HTML und Javascript mit {stil}

MathML formatieren

Math ML in HTML-Seiten 6 Blöcke mit Formeln und ihrem erklärenden Text

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.

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.

Math ML in HTML-Seiten E = m ⋅ c 2 E = K ⋅ Q1 ⋅ Q2 R Fg = G ⋅ m1 ⋅ m2 R2 T = h ⋅ c3 8 ⋅ Π ⋅ G ⋅ m T = T V2 C2 1 - S = k l n V Je schneller du dich bewegst, desto schwerer wirst du. Gegensätze ziehen sich an, Gleichgerichtetes stößt sich ab. Je größer der Abstand, desto schwächer die Anziehungskraft. Temperatur eines Schwarzen Lochs. Je schneller du dich durch den Raum bewegst, desto langsamer bewegst du dich in der Zeit. Entropie: Tendenz zur Unordnung und Zufälligkeit in einem Raum