MathML: Formeln in HTML

Mathematische Formeln als Grafik?

HTML erlaubt Formeln mit MathML-Tags via <math>…</math> an beliebigen Stellen innerhalb des body-Tags einer normalen Webseite – genauso wie Grafik mit SVG in HTML gesetzt wird.

<math display="block" mathsize="2rem">
    <munderover>
        <mo>∑</mo>
        <mrow> <mi>k</mi><mo>=</mo><mn>n</mn> </mrow>
        <mi>m</mi>
    </munderover>
    <mi>a(k)</mi>
</math>

MathML kam mit HTML5 in Webseiten. Firefox brachte MathML auf Smartphones, Safari auf iPhone und iPad. Chrome hat eine Weile lang Formeln angezeigt, hat sich später allerdings wieder distanziert (Chrome zieht MathML ab) und zeigt jetzt endlich ebenfalls Formeln in HTML-Seiten nativ an. Microsoft EDGE ist ebenfalls ein Chromium-Browser und zieht also mit.

Obwohl HTML aus dem wissenschaftlichen Umfeld stammt, hat es um Formeln Jahrzehnte lang einen Bogen gemacht. So kommt es, dass auf nahezu allen Webseiten Formeln als Grafik eingesetzt werden. Auch Wikipedia macht da keine Ausnahme. Grafik für Formeln ist Frust².

Bei jeder Korrektur geht die Suche nach dem Original von vorne los – gleich ob SVG, Illustrator oder Photoshop. Aber in erster Linie sind Formeln als Grafik nicht barrierefrei – sie können von Sehbehinderten nicht erfasst, von Screen Readern nicht vorgelesen werden. Für MathML hingegen gibt es Anwendungen wie Math Player mit Sprach-Eingabe und -Ausgabe und Braillezeile.

MathML verschönern mit CSS

MathML gibt es in zwei Geschmacksrichtungen: In Form von Presentation Tags, mit denen die Struktur der Formel als mathematische Notation gesetzt wird. Presentation Tags richten sich an den Satz von Formeln in HTML-Seiten. Presentation Tags lassen sich mit Hilfe von CSS und darüber hinaus mit Attributen in Form bringen. Damit steht dem »Schöner Wohnen« für Formeln auf Webseiten nichts entgegen.

Content Tags codieren die Bedeutung mathematischer Formeln und Ausdrücke und können programmatisch ausgewertet werden – z.B. um Diagramme zu entwickeln. Vor allem aber könnten Formeln für die Sprachausgabe aufbereitet werden.

Attribute für MathML

Das Markup für Matheformeln auf Webseiten hat große Ähnlichkeit mit HTML – der Einsatz geht also schnell von der Hand.

<math>

ist das Root-Element einer Formel, ähnlich wie <svg> für Scalable Vector Grafik.

Nur die Frequenz der MathML-Tags ist deutlich höher als die Frequenz von HTML-Tags in normalem Text. Tippen im Name der Mathematik was die Finger hergeben … denn die klassischen Editoren halten sich bedeckt.
Die Anzeige des math-Tags kann global durch CSS geändert werden.

math { font-size: xx-large; color: darkgreen; display: block; }

MathML – Formeln mit CSS formatieren

Tabelle der häufigsten MathML-Tags

Variablen, Operatoren, Zahlen und Konstante werden von leicht unterschiedlichen Tags dargestellt, damit der Satz durch Schrift, Weißraum und Schriftstil unterstützt werden kann. Variablen werden z.B. kursiv gesetzt, Operatoren brauchen etwas mehr padding rechts und links.

Die Sonderzeichen der Mathematik werden mit HTML-Entities wie ∫ (Integral) und ∑ (Summe) geschrieben. Die meisten Tags bieten die Attribute class, id, style, dir, href, mathbackground und mathcolor. Die Tabelle zeigt darum nur die individuellen Attribute der Tags.

<math>
	<mrow> 
		<mn>2</mn><mo>+</mo><mn>2</mn>
		<mo>=</mo><mn>4</mn> 
	</mrow> 
</math>

<math>
	<mi>Π</mi><mo>=</mo><mn>3,14159…</mn>
</math>

<munder>
   <mo>lim</mo>
   <mrow>
	  <mn>n</mn>
	  <mo>→</mo>
	  <mn>∞</mn>
   </mrow>
</munder>

<math>
<mfenced open="{" close="}" separators=",">
  <mi>0.48</mi><mi>0.7645</mi>
  <mi>1.265</mi><mi>47.01</mi>
</mfenced>
</math>

<mfrac bevelled="true">
   <mi>a</mi>
   <mi>b</mi>
</mfrac>

<msubsup> base subscript superscript </msubsup>

<msubsup>
	<mo>∫</mo>
	<mn>0</mn>
	<mi>∞</mi>
</msubsup>

class, id, style

MathML-Element lassen sich mit CSS Klassen und dem style-Attribut formatieren.

dir

Schreibrichtung der Formel: ltr (links nach rechts) oder rtl (rechts nach links).

href

Link zu einer Adresse

mathbackground

Hintergrundfarbe als #rgb, #rrggbb oder HTML-Farbname.

mathcolor

Textfarbe als #rgb, #rrggbb oder HTML-Farbname.

display

Werte:

• block – dann kann das MathML-Element beliebig positiert werden
• inline – dann erzeugt das MathML-Element keinen Zeilenumbruch und folgt dem Textfluss

overflow

Browser-Support für MathML

Firefox, Opera (ab 9.5) und Safari (ab 5.1) waren die ersten Browser, die mathematische Formeln innerhalb einer Webseite (so ziemlich) korrekt anzeigten. Chrome hatte MathML vor ein paar Jahren unterstützt, hatte die Unterstützung dann wieder beendet und ist jetzt wieder in MathML eingestiegen.

Die Javascript MathJax-Library ist der Rettunganker für diejenigen, die fürchten, dass ihre Benutzer vielleicht nicht mit Formeln konfrontiert werden.

Umrechnung von XYZ nach Lab mit MathML

<math>
   <mpadded>                             // Abstand zwischen Elementen
      <msup><mi>L</mi><mn>*</mn></msup>  // Hochgesetzt
      <mo>=</mo>                         // Operand
      <mn>116</mn><mo>×</mo>
      <mroot>                            // Wurzel mit Index
         <mfrac><mi>Y</mi><msub><mi>Y</mi><mn>n</mn></msub></mfrac><mn>3</mn>
      </mroot>
      <mo>-</mo><mn>16</mn>
   </mpadded>
</math>

Tabellen und Matrizen mit MathML: Transformation von RGB nach XYZ

Externe Quellen

• Feature MathML – Chrome Status für MathML
• Beispiele für Formelsatz mit MathML
• Tags und Attribute bei Mozilla
• MathJax Open Source JavaScript Engine
• Linebreak – Zeilenumbruch und Einrücken in Math