Einführung in 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 einführen.

Einfügen von Formeln in HTML über das <math>-Element

MathML verwendet dieselbe Syntax wie HTML, um einen Baum von Elementen und Attributen darzustellen. Insbesondere wird jede mathematische Formel durch ein <math>-Element repräsentiert, das innerhalb einer HTML-Seite platziert werden kann. Im folgenden Dokument befindet es sich in einem Absatz von Text:

html
<!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 (sein erstes Kind) und einem Nenner (sein zweites Kind). So wird es in Ihrem Browser gerendert:

Warnung: Wenn Sie nur "1 3" statt eines Bruchs sehen, dann unterstützt Ihr Browser möglicherweise MathML nicht. Schauen Sie sich die Browser-Kompatibilitätstabelle für weitere Details an.

Das Anzeige-Attribut

Beachten Sie, dass die Formel im vorherigen Beispiel in derselben Zeile wie der Text des Absatzes steht. Es ist jedoch recht häufig, dass große mathematische Formeln stattdessen zentriert in einer eigenen Zeile dargestellt werden, 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 Veränderung im Erscheinungsbild 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 wird stattdessen der Lesbarkeit der mathematischen Formel Priorität eingeräumt.

Hinweis: Dies entspricht dem LaTeX-Konzept von inline-Formeln (eingerahmt durch Dollarzeichen $...$) und display-Formeln (eingerahmt durch \[...\]).

Hinweis: Die oben erwähnte Aussehensveränderung wird tatsächlich durch die math-style-Eigenschaft gesteuert, die für <math display="block"> ursprünglich normal und ansonsten compact ist. In einigen MathML-Teilbäumen kann diese Eigenschaft dann automatisch compact werden, aber wir werden diese Feinheit für dieses Einführungstutorial 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 rendern. Zum Beispiel würde die einfache Formel "1 + 2 + 3" in MathML so kodiert werden:

html
<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".

html
<math>
  <mfrac>
    <mrow>
      <mn>1</mn>
      <mo>+</mo>
      <mn>2</mn>
    </mrow>
    <mn>3</mn>
  </mfrac>
</math>

Aktives Lernen: verschachtelte Ausdrücke

Als Übung versuchen Sie, die folgenden Ausdrücke mit den bisher gesehenen MathML-Elementen zu schreiben. Wenn Sie feststecken oder die Lösung überprüfen möchten, schauen Sie sich den Quellcode des Beispiels an.

Zusammenfassung

In diesem Artikel haben wir uns angesehen, wie man das <math>-Element verwendet, um eine mathematische Formel in ein HTML-Dokument einzufügen. Wir haben über die Unterschiedlichkeiten im Rendering zwischen <math>-Elementen gelernt, die display="block" verwenden oder nicht. Zusätzlich sind uns ein paar andere MathML-Elemente begegnet: <mfrac> für Brüche, <mrow> zur Gruppierung und schließlich einige Textelemente. Wir werden diese Textcontainer im nächsten Artikel weiter analysieren.

Siehe auch