MathML: Formeln in HTML

MathML ist die Markup-Spache für mathematische Formeln und Ausdrücke. MathML gibt es seit 1997, aber für die nächsten 15 Jahre unterstützte kein Browser das Markup für Formeln. So verkümmerten das Formel-Markup im besucherfreien N-Raum.

Math ML Formelsatz für Webseiten

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.

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 wollte Anfang 2021, dann Anfang 2022 zu den Formeln zurückkehren, und verweist jetzt auf die Zukunft (MathML in Chrome Canary).

Obwohl HTML aus dem wissenschaftlichen Umfeld stammt, hat es um Formeln 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 Frust2.

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

<mrow>

gruppiert Ausdrücke mit einem oder mehr Operatoren und ihren Operanden. mrow erzeugt eine horizontale Zeile – ähnlich dem tr-Tag in HTML.

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

<mi>

eine Bezeichnung, z.B. Name einer Funktion, Variablen oder eine Konstante.

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

Attribute mi

mathsize (small, normal, big, length), mathvariant (normal, bold, italic, bold-italic, double-struck, bold-fraktur, script, … )

<mo>

Operator im weitesten Sinne, dazu zählen auch Klammern, Kommas und Semikolons.

Eulersche Zahl e mit MathML

e= lim n ( 1 + 1 n ) n
<munder>
   <mo>lim</mo>
   <mrow>
	  <mn>n</mn>
	  <mo>→</mo>
	  <mn>∞</mn>
   </mrow>
</munder>

Attribute mo

accent, fence, form, largeop, lspace, mathbackground, mathcolor, mathsize, mathvariant, maxsize, minsize, movablelimits, rspace, spearator, stretchy, symmetric

<mfenced>

Deprecated (Veraltet) – öffnende und schließende Klammern und Trenner wie Kommas oder Semicolons. Wird noch von mathJax und Safari unterstützt. Nicht mehr unterstützt von Chrome Canari und Firefox. Ersetzen durch <mo>(</mo> und <mo>)</mo> (MathML mfenced element deprecated on web)

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

Attribute mfenced

open, separators

<mn>

Literal, meist ein Folge von Ziffern mit Separator (Punkt oder Komma) oder ein Text, der für eine Zahl steht

0 4711 PAK

Attribute mn

mathsize, mathvariant

<mroot>

Wurzel mit Index

Umrechnung von XYZ nach Lab

L*=116× YYn 3 16

Attribute mroot

close

<msqrt>

Quadratwurzel ohne Index, nur ein Argument

x

Attribute msqrt

close

<mfrac>

Brüche

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

Attribute mfrac

bevelled (nebeneinander oder untereinander), denomalign, linethickness, numalign

<msubsup>

Element mit Superscript und Subscript; Natation ist

<msubsup> base subscript superscript </msubsup>
0exx
<msubsup>
	<mo>∫</mo>
	<mn>0</mn>
	<mi>∞</mi>
</msubsup>

Attribute msubsup

subscriptshift, superscriptshift

<mtable>

Tabelle oder Matrix. Innerhalb eines mtable-Tags dürfen nur mtr- und mtd-Tags liegen (ähnlich wie tr- und td-Tags im table-Tag).

X Y Z = 0.4124 0.3575 0.1804 0.21260.71510.07210.01930.11910.9502*RGB

mtable Attribute

alignmentscope, columnalign, columnlines, columnspacing, columnwidth, displaystyle, equalcolumns, equalrows, frame, framesspacing, groupalign, minlabelspacing, rowalign, rowlines, rowspacing, side, width

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

L* = 116 × Y Y n 3 16 a* = 500× ( X Xn 3 Y Yn 3 ) b* = 200 × ( Y Yn 3 Z Zn 3 )
<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

(XYZ) = (0.41240.35750.18040.21260.71510.07210.01930.11910.9502 )* (RGB )
2024-02-12 SITEMAP BLOG