Erste Schritte mit MathML
In diesem Artikel werden wir ein einfaches HTML-Dokument nehmen und sehen, wie wir MathML-Formeln darin einfügen können, wobei wir unterwegs einige Elemente einführen.
| Voraussetzungen: | Grundlegende Software installiert, grundlegende Kenntnisse in Arbeiten mit Dateien, und HTML-Grundlagen (siehe Einführung in HTML.) |
|---|---|
| Ziel: | Das grundlegende Syntax von MathML zu verstehen und wie man es in HTML-Seiten integriert. |
Einfügen von Formeln in HTML über das <math>-Element
MathML verwendet die gleiche Syntax wie HTML, um einen Baum von 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 in einem Absatztext:
<!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 spezifiziert einen Bruch mit einem Zähler (seinem ersten Kind) und einem Nenner (seinem zweiten Kind). So wird es in Ihrem Browser dargestellt:
Warnung: Wenn Sie nur "1 3" statt eines Bruchs sehen, unterstützt Ihr Browser möglicherweise kein MathML. Überprüfen Sie die Tabelle zur Browser-Kompatibilität für weitere Details.
Das Attribut display
Beachten Sie, dass im vorherigen Beispiel die Formel in derselben Zeile wie der Text des Absatzes steht. Es ist jedoch recht häufig, große mathematische Formeln zentriert auf einer eigenen Linie darzustellen, wie unten gezeigt. Um dies zu erreichen, müssen Sie ein display="block"-Attribut am <math>-Element anbringen.
Sie werden 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 Texts 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 (eingerahmt von Dollarzeichen $...$) und display-Formeln (eingerahmt von \[...\]).
Hinweis:
Die oben erwähnte Änderung im Aussehen wird tatsächlich von der math-style-Eigenschaft gesteuert, die zunächst normal für <math display="block"> und ansonsten compact ist. In einigen MathML-Subtrees kann diese Eigenschaft automatisch compact werden, aber wir werden diese Feinheit in diesem einführenden 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. Beispielsweise würde die einfache Formel "1 + 2 + 3" in MathML so kodiert:
<math>
<mn>1</mn>
<mo>+</mo>
<mn>2</mn>
<mo>+</mo>
<mn>3</mn>
</math>
Das <mrow>-Element ist ein generisches Container-Element, das ein ähnliches Layout ausführt, jedoch überall im MathML-Unterbaum platziert werden kann. Es ist hilfreich, 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>
Aktives Lernen: Verschachtelte Ausdrücke
Als Übung überlegen Sie, wie Sie die folgenden Ausdrücke nur mit den bisherigen MathML-Elementen schreiben können. Wenn Sie nicht weiterkommen oder die Lösung überprüfen möchten, sehen Sie sich den Quellcode des Beispiels an.
Zusammenfassung
In diesem Artikel haben wir uns angesehen, wie das <math>-Element verwendet wird, um eine mathematische Formel in ein HTML-Dokument einzufügen. Wir haben über die Unterschiedlichkeiten in der Darstellung zwischen <math>-Elementen, die display="block" verwenden, und solchen, die dies nicht tun, gelernt. Außerdem haben wir einige andere MathML-Elemente kennengelernt: <mfrac> für Brüche, <mrow> für Gruppierungen und letztlich einige Textelemente. Wir werden diese Textcontainer im nächsten Artikel weiter analysieren.