MathML: Formeln in HTML5-Seiten

MathML nicht mehr in Chrome

MathML ist die Markup-Spache für mathematische Formeln und Ausdrücke. MathML gibt es seit 1997, aber MathML ließ sich nicht in normale Webseiten setzen und verkümmerte im besucherfreien N-Raum.

Die Browser (na ja … bis auf … ) können in den neueren Versionen Formeln mit MathML in Webseiten darstellen. Firefox bringt MathML auf Smartphones, Safari auf iPhone und iPad.

Obwohl HTML aus dem wissenschaftlichen Umfeld stammt, hat es um Formeln einen Bogen gemacht. Als eigenständige Seite macht eine einsame Formel aber nicht wirklich Sinn …

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.

HTML5 erlaubt Formeln mit MathML-Tags via <math>…</math> Tags an beliebigen Stellen innerhalb des body-Tags einer normalen Webseite – in gleicher Art wie in HTML5 Grafik mit SVG gesetzt werden kann.

Presentation Tags und Content Tags

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 MathML-Attributen in Form bringen. Damit steht dem »Schöner Wohnen« für wissenschaftliche Formeln auf Webseiten nichts entgegen.

»Content Tags« codieren die Bedeutung mathematischer Formeln und Ausdrücke. Content Tags können programmatisch ausgewertet werden – z.B. um Diagramme zu entwickeln, aber vor allem würde sich die Formel für die Sprachausgabe aufbereiten lassen.

Browser mit MathML

Firefox, Opera (ab 9.5) und Safari (ab 5.1) zeigen Formeln mit MathML innerhalb einer HTML5-Webseite korrekt an. IE9 und Chrome zeigen die Formeln als flachen Text. Für Internet Explorer gibt es allerdings ein Plugin für MathML.

Auf Smartphones werden Formeln mit MathML nur mit Firefox angezeigt. Auf iPhone und iPad zeigt Safari elementare MathML-Tags (so ziemlich) korrekt an … so ziemlich: Auf dem iPhone und dem iPad fehlen ordentliche Klammern und auch Safari auf dem Mac hat noch die eine oder andere ungepflegte Ecke.

math-ml-auf-ipad

Umrechnung von XYZ nach Lab mit MathML

L*=116× YYn316a*=500×XXn3YYn3b*=200×YYn3ZZn3
<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

MathML Attribute

MathML für 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 formatieren

Tabelle 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 &int; (Integral) und &sum; (Summe) geschrieben.

Die meisten MathML-Tags bieten die Attribute class, id, style, dir, href, mathbackground und mathcolor. Die Tabelle zeigt darum nur die individuellen Attribute der MathML-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 n1 + 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>

öffnende und schließende Klammern und Trenner wie Kommas oder Semicolons

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

XYZ=0.41240.35750.18040.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

Kein MathML in Chrome

Chrome hat inzwischen MathML im wahrsten Sinne des Wortes wieder aus HTML-Seiten abgezogen. Es gibt eine umfangreiche Javascript-Library – MathJax – die Browsern ohne native MathML-Unterstützung Formeln beibringt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

6 thoughts on “MathML: Formeln in HTML5-Seiten”

  1. Haessler – 11. März 2014

    Ich habe das hier gefunden, um LaTeX in MathML umzuwandeln:

    https://www.maths.nottingham.ac.uk/personal/drw/lm.html

    Ausprobiert habe ich es allerdings nicht, da ich LaTeX nie benutzt habe.

  2. Christian Winterhager – 7. März 2014

    Gibt es ein Programm zur Umwandlung von LaTeX in MathML?

  3. gold account – 14. September 2012

    tja, irgendwie sind die damit ca. 10 jahre zu spät. habe mich über mein halbes leben aufgeregt in office keine richtigen formeln einfügen zu können – jedenfalls ohne große umwege war das nicht möglich. aber toll, dass ein microsoft mitarbeiter das jetzt aus der schublade geholt hat und das als „innovation“ bzw. „extra“ den office besitzern, die eine gültigkeitsprüfung überstehen, per update andreht. man hätte ja vor 15 jahren einfach mathe-ass kaufen können, lief auf nem 286er problemlos und hat übern nadeldrucker schön die formeln ausgespuckt.

  4. admin – 27. August 2012

    Das Plugin für IE ist hier:
    http://www.dessci.com/en/products/mathplayer/download.htm

    Wer Seiten mit Formeln liest – z.B. Formelsammlungen oder Mathe-Vorlesungen – ist auch bereit, das Plugin zu installieren.

  5. Anonymous – 17. August 2012

    Hängt vom Browser ab. Firefox kann das, IE braucht evtl. ein Addon.

  6. Kerrin – 14. August 2012

    Bei mir werden die Formeln auf dem Pc nciht richtig angezeigt. Muss man in das math-Tag nicht noch den Typ angeben?