14 Mathematische Ausdrücke mit MathML

Gestalten Sie mathematische Formeln dynamisch und interaktiv mit MathML und JavaScript

Mithilfe der MathML (Mathematical Markup Language ) können Sie mathematische Ausdrücke in Dokumente integrieren. In Zusammenarbeit mit JavaScript ergeben sich weitere Möglichkeiten zur dynamischen und interaktiven Gestaltung. Das World Wide Web Consortium (kurz: W3C) hat im April 2014 die Empfehlung für die zweite Ausgabe des Standards Math ML 3.0 veröffentlicht.

Bei den aktuellen Browsern wird MathML nur in Mozilla Firefox direkt umgesetzt. Die JavaScript-Bibliothek MathJax (http://www.mathjax.org) ermöglicht aber die Umsetzung von MathML in vielen weiteren Browsern. In den Beispielprogrammen dieses Kapitels ist die Bibliothek MathJax eingebunden.

14.1 Grundelemente

Im nachfolgenden Programm sehen Sie einige wichtige Grundelemente für den Aufbau von mathematischen Ausdrücken:

<!DOCTYPE html><html><head><meta charset="utf-8">
   <title>MathML, Grundelemente</title>
   <script src="https://cdnjs.cloudflare.com/ajax/
      libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</head>
<body>
<p> Identifier, Operator, Number:
    <math>
       <mi>a</mi>
       <mo>+</mo>
       <mn>2.5</mn>
       <mo>=</mo>
       <mn>3</mn>
       <mi>a</mi>
       <mi>b</mi>
    </math>
</p>
<p> Quadratwurzel:
    <math>
       <msqrt> <mi>a</mi> <mo>+</mo> <mn>2.5</mn> </msqrt>
    </math> </p>
<p> Wurzel:
    <math> <mroot> <mi>b</mi> <mn>3</mn> </mroot> </math> </p>
<p> Index:
    <math> <msub> <mi>a</mi> <mn>2</mn> </msub> </math> </p>
<p> Exponent:
    <math> <msup> <mi>b</mi> <mn>-3.5</mn> </msup> </math> </p>
<p> Index und Exponent:
    <math>
        <msubsup> <mi>c</mi> <mn>0</mn> <mn>2</mn> </msubsup>
    </math> </p>
<p> Format:
    <math mathbackground="#909090" mathcolor="#ffffff" mathsize="16pt">
       <mn>
          <msqrt> <mi>a</mi> <mo>+</mo> <mn>2.5</mn> </msqrt>
       </mn> </math> </p>
</body></html>

Listing 14.1 Datei »mm_grundelement.htm«

Im Kopf der Datei wird die Online-Version der Bibliothek MathJax eingebunden. Die Adresse sollte nicht unterbrochen werden und innerhalb einer Zeile stehen. Hier sind es nur aus Druckgründen zwei Zeilen. Der Link sieht bei den restlichen Programmen dieses Kapitels genauso aus und wird daher dort nicht mehr dargestellt.

Alle Elemente von mathematischen Ausdrücken und Formeln stehen innerhalb des Containers <math>, der wiederum innerhalb des normalen Texts und HTML-Codes einer Seite steht. In einem einfachen mathematischen Ausdruck können die Elemente einfach nacheinander notiert werden. Mathematische Bezeichner (engl.: identifier) stehen dabei im Container <mi>, Operatoren im Container <mo> und Zahlenwerte im Container <mn>.

Der Ausdruck 3ab steht für die Multiplikation 3 * a * b. Es wird standardmäßig kein Malpunkt als Multiplikationszeichen gesetzt. Die beiden Bezeichner a und b stehen einzeln, jeweils in einem eigenen <mi>-Container.

Viele nachfolgende MathML-Container werden zur besseren Übersicht kompakter notiert. Die eingebetteten Container stehen also in der Datei nicht mehr in eigenen Zeilen.

Der Container <msqrt> dient zur Darstellung einer Quadratwurzel . Unter einer Wurzel steht der sogenannte Radikand . Das ist der Wert, aus dem die Wurzel gezogen wird. Bei der Quadratwurzel kann das ein einzelner Bezeichner oder eine Zahl sein. Es kann aber auch ein längerer Ausdruck sein, dessen Elemente nacheinander notiert werden.

Der Container <mroot> dient zur Darstellung einer allgemeinen Wurzel . Im Unterschied zum Container <msqrt> müssen hier innerhalb des Containers zwei Elemente notiert werden, zunächst der Radikand (hier b), dann der Wurzelexponent (hier 3). Falls eines der beiden Elemente aus einem längeren Ausdruck bestehen soll, muss dieser zuvor zusammengefasst werden. Das kann u. a. mithilfe des Containers <mrow> gemacht werden, siehe Abschnitt 14.3. Diese Vorschrift zum Zusammenfassen gilt auch für viele Container in den nachfolgenden Beispielen.

Der Index eines Bezeichners wird mithilfe des Containers <msub> notiert. Innerhalb des Containers müssen zwei Elemente stehen: zunächst der Bezeichner, dann der Index. Ein Ausdruck mit einem Exponenten wird mithilfe des Containers <msup> notiert. Innerhalb des Containers müssen ebenso zwei Elemente stehen: zunächst die Basis, dann der Exponent. Ein Ausdruck mit einem Index und einem Exponenten wird mithilfe des Containers <msubsup> notiert. Innerhalb des Containers müssen drei Elemente stehen: zunächst der Bezeichner, dann der Index, dann der Exponent.

Beim Container <math> und vielen Containern für die einzelnen Elemente können mithilfe der Attribute mathbackground, mathcolor und mathsize die Hintergrundfarbe , die Schriftfarbe und Schriftgröße eingestellt werden.

In Abbildung 14.1 werden die mathematischen Ausdrücke dargestellt.

Abbildung 14.1 MathML, Grundelemente