MathML verfassen

MathML verwenden

Auch wenn Ihre MathML-Formeln wahrscheinlich mit Autorenwerkzeugen erstellt werden, sollten Sie einige Hinweise beachten, um sie richtig in Ihr Dokument einzubinden.

MathML in HTML-Seiten

Jede MathML-Gleichung wird durch ein math-Wurzelelement dargestellt, das direkt in HTML-Seiten eingebettet werden kann. Standardmäßig wird die Formel innerhalb einer Textzeile dargestellt, wobei zusätzliche Anpassungen ihre Höhe möglichst gering halten. Verwenden Sie ein display="block"-Attribut, um komplexe Formeln in der üblichen Größe und in einem eigenen Absatz darzustellen.

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>MathML in HTML</title>
  </head>
  <body>
    <h1>MathML in HTML</h1>

    <p>
      One over square root of two (inline style):
      <math>
        <mfrac>
          <mn>1</mn>
          <msqrt>
            <mn>2</mn>
          </msqrt>
        </mfrac>
      </math>
    </p>

    <p>
      One over square root of two (display style):
      <math display="block">
        <mfrac>
          <mn>1</mn>
          <msqrt>
            <mn>2</mn>
          </msqrt>
        </mfrac>
      </math>
    </p>
  </body>
</html>

Mathematische Schriftarten

Wie im Artikel über MathML-Schriftarten erläutert, sind mathematische Schriftarten für die Darstellung von MathML-Inhalten wichtig. Daher empfiehlt es sich, auf die Installationsanleitung für solche Schriftarten hinzuweisen oder sie als Web-Schriftarten bereitzustellen.

Die MathFonts-Seite stellt solche Web-Schriftarten zusammen mit passenden Stylesheets bereit. Um beispielsweise Latin Modern auszuwählen und ersatzweise Web-Schriftarten zu verwenden, fügen Sie einfach die folgende Zeile in den Dokumentkopf ein:

<link
  rel="stylesheet"
  href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />

Es stehen mehrere Schriftarten zur Auswahl. Sie können beispielsweise einen anderen Stil wie STIX auswählen:

<link
  rel="stylesheet"
  href="https://fred-wang.github.io/MathFonts/STIX/mathfonts.css" />

Die XITS-Schriftart wird für Formeln empfohlen, die von rechts nach links dargestellt werden müssen. Weitere Informationen finden Sie bei der globalen Eigenschaft dir.

<link
  rel="stylesheet"
  href="https://fred-wang.github.io/MathFonts/XITS/mathfonts.css" />

Konvertierung aus einer einfachen Syntax

In diesem Abschnitt betrachten wir einige Werkzeuge, mit denen sich eine leichtgewichtige Auszeichnungssprache wie die verbreitete Sprache LaTeX in MathML konvertieren lässt.

Clientseitige Konvertierung

Bei diesem Ansatz werden Formeln direkt in Webseiten geschrieben. Eine JavaScript-Bibliothek übernimmt ihre Konvertierung in MathML. Das ist wahrscheinlich die einfachste Möglichkeit, bringt aber auch einige Nachteile mit sich: Zusätzlicher JavaScript-Code muss geladen und ausgeführt werden, Autoren müssen reservierte Zeichen maskieren, und Webcrawler haben keinen Zugriff auf die MathML-Ausgabe.

Ein benutzerdefiniertes Element kann den Quellcode aufnehmen und sicherstellen, dass die entsprechende MathML-Ausgabe über einen Shadow-Teilbaum eingefügt und dargestellt wird. Mit dem Element <la-tex> von TeXZilla lässt sich das obige MathML-Beispiel beispielsweise kürzer wie folgt schreiben:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>MathML in HTML5</title>
    <script src="https://fred-wang.github.io/TeXZilla/TeXZilla-min.js"></script>
    <script src="https://fred-wang.github.io/TeXZilla/examples/customElement.js"></script>
  </head>
  <body>
    <h1>MathML in HTML5</h1>

    <p>
      One over square root of two (inline style):
      <la-tex>\frac{1}{\sqrt{2}}</la-tex>
    </p>

    <p>
      One over square root of two (display style):
      <la-tex display="block">\frac{1}{\sqrt{2}}</la-tex>
    </p>
  </body>
</html>

Für Autoren, die mit LaTeX nicht vertraut sind, gibt es alternative Eingabemethoden wie die Syntax von ASCIIMath oder jqMath. Achten Sie darauf, die JavaScript-Bibliotheken zu laden und die richtigen Trennzeichen zu verwenden:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>ASCII MathML</title>
    …
    <!-- ASCIIMathML.js -->
    <script src="/path/to/ASCIIMathML.js"></script>
    …
    <!-- jqMath -->
    <script src="https://mathscribe.com/mathscribe/jquery-1.4.3.min.js"></script>
    <script src="https://mathscribe.com/mathscribe/jqmath-etc-0.4.6.min.js"></script>
    …
  </head>
  <body>
    …
    <p>One over square root of two (inline style, ASCIIMath): `1/(sqrt 2)`</p>
    …
    <p>One over square root of two (inline style, jqMath): $1/√2$</p>
    …
    <p>One over square root of two (display style, jqMath): $$1/√2$$</p>
    …
  </body>
</html>

Befehlszeilenprogramme

Statt MathML-Ausdrücke beim Laden der Seite zu erzeugen, können Sie Befehlszeilenwerkzeuge verwenden. So entstehen Seiten mit statischen MathML-Inhalten, die schneller geladen werden. Betrachten wir erneut eine Seite namens input.html mit dem Inhalt aus dem Abschnitt zur clientseitigen Konvertierung:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>MathML in HTML5</title>
  </head>
  <body>
    <h1>MathML in HTML5</h1>
    <p>One over square root of two (inline style): $\frac{1}{\sqrt{2}}$</p>
    <p>One over square root of two (display style): $$\frac{1}{\sqrt{2}}$$</p>
  </body>
</html>

Diese Seite enthält kein script-Tag. Stattdessen wird die Konvertierung über die folgende Befehlszeile mit Node.js und TeXZilla ausgeführt:

cat input.html | node TeXZilla.js streamfilter > output.html

Nach Ausführung des Befehls wird eine Datei namens output.html mit der folgenden HTML-Ausgabe erstellt. Die durch Dollarzeichen abgegrenzten Formeln wurden in MathML konvertiert:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>MathML in HTML5</title>
  </head>
  <body>
    <h1>MathML in HTML5</h1>

    <p>
      One over square root of two (inline style):
      <math><semantics><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><annotation encoding="TeX">\frac{1}{\sqrt{2}}</annotation></semantics></math>
    </p>

    <p>
      One over square root of two (display style):
      <math display="block"><semantics><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><annotation encoding="TeX">\frac{1}{\sqrt{2}}</annotation></semantics></math>
    </p>
  </body>
</html>

Es gibt auch komplexere Werkzeuge, die beliebige LaTeX-Dokumente in Dokumente mit MathML-Inhalten umwandeln können. Mit LaTeXML konvertieren die folgenden Befehle beispielsweise foo.tex in ein HTML- oder EPUB-Dokument:

latexmlc --dest foo.html foo.tex # Generate an HTML document foo.html
latexmlc --dest foo.epub foo.tex # Generate an EPUB document foo.epub

Grafische Benutzeroberflächen

In diesem Abschnitt betrachten wir einige Bearbeitungswerkzeuge mit grafischen Benutzeroberflächen.

Eingabefeld

Ein einfacher Ansatz besteht darin, Konverter für eine einfache Syntax als Eingabefelder für mathematische Ausdrücke einzubinden. Beispielsweise bieten Thunderbird und SeaMonkey den Befehl Einfügen > Mathematik. Er öffnet ein Popup-Fenster mit einem Eingabefeld für die Konvertierung von LaTeX in MathML und einer Live-Vorschau des MathML-Ergebnisses:

Der Gleichungseditor von LibreOffice (Datei → Neu → Formel) zeigt eine mögliche Erweiterung: Sein Eingabefeld für die StartMath-Syntax bietet zusätzliche Bedienelemente, mit denen Sie vordefinierte mathematische Konstruktionen einfügen können.

WYSIWYG-Editoren

Andere Editoren bieten Funktionen zur Bearbeitung mathematischer Ausdrücke, die direkt in ihre WYSIWYG-Oberfläche integriert sind. Die folgenden Screenshots stammen aus LyX und TeXmacs. Beide unterstützen den Export nach HTML:

Optische Zeichen- und Handschrifterkennung

Eine weitere Möglichkeit zur Eingabe mathematischer Ausdrücke sind Benutzeroberflächen für die optische Zeichenerkennung oder Handschrifterkennung. Einige dieser Werkzeuge unterstützen mathematische Formeln und können sie als MathML exportieren. Der folgende Screenshot zeigt eine Demo von MyScript: