Erste Schritte mit MathML
In diesem Artikel werden wir ein einfaches HTML-Dokument nehmen und sehen, wie man MathML-Formeln darin einfügt, wobei wir einige Elemente auf dem Weg vorstellen.
Einfügen von Formeln in HTML über das <math>-Element
MathML verwendet die gleiche Syntax wie HTML, um einen Baum aus Elementen und Attributen darzustellen. Insbesondere wird jede mathematische Formel durch ein <math>-Element dargestellt, das in eine HTML-Seite eingefügt werden kann. Im folgenden Dokument befindet es sich innerhalb eines Textabsatzes:
<!doctype html>
<html lang="en-US">
<head>
<title>My first math page</title>
</head>
<body>
<p>
The fraction
<math>
<mfrac>
<mn>1</mn>
<mn>3</mn>
</mfrac>
</math>
is not a decimal number.
</p>
</body>
</html>
Das <mfrac>-Element gibt einen Bruch mit einem Zähler (seinem ersten Kind) und einem Nenner (seinem zweiten Kind) an. So wird es in Ihrem Browser dargestellt:
Warnung: Wenn Sie nur "1 3" sehen, anstatt eines Bruchs, unterstützt Ihr Browser möglicherweise MathML nicht. Schauen Sie sich die Browser-Kompatibilitätstabelle für weitere Details an.
Das Attribut display
Beachten Sie, dass im vorherigen Beispiel die Formel in derselben Zeile wie der Text des Absatzes steht. Es ist jedoch ziemlich üblich, große mathematische Formeln stattdessen zentriert auf einer eigenen Zeile darzustellen, wie unten gezeigt. Um dies zu erreichen, müssen Sie ein display="block"-Attribut an das <math>-Element anhängen.
Sie werden möglicherweise auch eine subtile Änderung im Aussehen bemerken: Der Text und der vertikale Abstand des Bruchs werden etwas größer. Ohne das display="block"-Attribut wird die Höhe minimiert, um den Fluss des umgebenden Textes nicht zu stören. Mit dem display="block"-Attribut liegt der Schwerpunkt stattdessen auf der Lesbarkeit der mathematischen Formel.
Hinweis:
Dies entspricht dem LaTeX-Konzept von inline-Formeln (begrenzt durch Dollarzeichen $...$) und display-Formeln (begrenzt durch \[...\]).
Hinweis:
Die oben erwähnte Änderungserscheinung wird tatsächlich durch die math-style-Eigenschaft gesteuert, die anfänglich für <math display="block"> normal und andernfalls compact ist. In einigen MathML-Unterbäumen kann diese Eigenschaft dann automatisch compact werden, aber wir werden diese Feinheit für dieses einführende Tutorial ignorieren. Auch dies ist ähnlich zu LaTeX.
Gruppierung mit dem <mrow>-Element
Das <math>-Element kann tatsächlich eine beliebige Anzahl von Kindern enthalten und wird sie im Wesentlichen in einer Reihe darstellen. Zum Beispiel würde die einfache Formel "1 + 2 + 3" in MathML so kodiert aussehen:
<math>
<mn>1</mn>
<mo>+</mo>
<mn>2</mn>
<mo>+</mo>
<mn>3</mn>
</math>
Das <mrow>-Element ist ein generischer Container, der ein ähnliches Layout bietet, aber überall im MathML-Unterbaum platziert werden kann. Es ist hilfreich, um mehrere Elemente zusammenzufassen. Zum Beispiel ist der Zähler des folgenden Bruchs (sein erstes Kind) "eins plus zwei".
<math>
<mfrac>
<mrow>
<mn>1</mn>
<mo>+</mo>
<mn>2</mn>
</mrow>
<mn>3</mn>
</mfrac>
</math>
Ihr Turn: Schreiben verschachtelter Ausdrücke
Als Übung überlegen, wie man die folgenden Ausdrücke mit nur den bisher gesehenen MathML-Elementen schreibt. Wenn Sie stecken bleiben oder die Lösung überprüfen möchten, sehen Sie sich den Quellcode des Beispiels an.
Zusammenfassung
In diesem Artikel haben wir uns angeschaut, wie man das <math>-Element verwendet, um eine mathematische Formel in ein HTML-Dokument einzufügen. Wir haben die Unterschiede in der Darstellung zwischen <math>-Elementen, die display="block" verwenden oder nicht, kennengelernt. Außerdem sind wir auf einige andere MathML-Elemente gestoßen: <mfrac> für Brüche, <mrow> für Gruppierungen und schließlich einige Textelemente. Diese Textcontainer werden wir im nächsten Artikel weiter analysieren.