Einstieg in MathML

In diesem Artikel nehmen wir ein einfaches HTML-Dokument und sehen uns an, wie man MathML-Formeln darin einfügt, wobei wir einige Elemente auf dem Weg kennenlernen.

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 repräsentiert, das in eine HTML-Seite eingefügt werden kann. Im folgenden Dokument befindet es sich innerhalb eines Textabschnitts:

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 gibt einen Bruch mit einem Zähler (seinem ersten Kind) und einem Nenner (seinem zweiten Kind) an. So wird es in Ihrem Browser gerendert:

Warnung: Wenn Sie nur "1 3" sehen anstelle eines Bruchs, unterstützt Ihr Browser möglicherweise kein MathML. Sehen Sie in der Browser-Kompatibilitätstabelle nach, um weitere Details zu erhalten.

Das display-Attribut

Beachten Sie, dass sich in dem vorherigen Beispiel die Formel auf derselben Zeile wie der Text des Absatzes befindet. Es ist jedoch ziemlich üblich, große mathematische Formeln zentriert in einer eigenen Zeile darzustellen, wie unten gezeigt. Um dies zu erreichen, müssen Sie dem <math>-Element ein display="block"-Attribut hinzufügen.

Sie bemerken möglicherweise auch eine subtile Veränderung im Erscheinungsbild: 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 Dollarnotationen $...$) und display-Formeln (begrenzt durch \[...\]).

Hinweis: Die oben erwähnte Erscheinungsänderung wird tatsächlich durch die math-style-Eigenschaft gesteuert, die anfänglich normal für <math display="block"> und andernfalls 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 im Wesentlichen in eine Reihe gerendert. Beispielsweise würde die einfache Formel "1 + 2 + 3" in MathML wie folgt 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 vornimmt, aber überall im MathML-Teilbaum platziert werden kann. Es ist nützlich, um mehrere Elemente zusammenzufassen. Beispielsweise 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

Üben Sie, die folgenden Ausdrücke mit nur den bisher behandelten MathML-Elementen zu schreiben. Wenn Sie nicht weiterkommen 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 ein <math>-Element verwendet, um eine mathematische Formel in ein HTML-Dokument einzufügen. Wir haben Unterschiede im Rendering von <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> zur Gruppierung und schließlich einige Textelemente. Wir werden diese Textcontainer im nächsten Artikel weiter analysieren.

Siehe auch