MathML gescriptete Elemente

Wir setzen die Überprüfung der grundlegenden mathematischen Notationen fort und konzentrieren uns darauf, MathML-Elemente mit Skripten zu erstellen.

Voraussetzungen:	Grundlegende Software installiert, Grundkenntnisse im Umgang mit Dateien, und HTML-Grundlagen (studieren Sie die Einführung in HTML.)
Ziel:	Vertrautheit mit grundlegenden MathML-Elementen, die geskriptete Elemente erzeugen.

Tief- und Hochstellungen

Ähnlich wie im vorherigen Artikel gesehen, haben die <msub>, <msup> und <msubsup> eine spezielle Struktur, die genau zwei Elemente (für <msub>, <msup>) oder drei Elemente (für <msubsup>) erwartet:

html

<p>
  msub:
  <math>
    <msub>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
    </msub>
  </math>
</p>

<p>
  msup:
  <math>
    <msup>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
    </msup>
  </math>
</p>
<p>
  msubsup:
  <math>
    <msubsup>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
      <mtext>child3</mtext>
    </msubsup>
  </math>
</p>

Nachfolgend ist die Darstellung des obigen Beispiels in Ihrem Browser zu sehen.

Sie sollten feststellen, dass:

Das zweite Kind des <msub>-Elements als Tiefstellung an das erste Kind angehängt ist.
Das zweite Kind des <msup>-Elements als Hochstellung an das erste Kind angehängt ist.
Die zweiten und dritten Kinder des <msubsup>-Elements jeweils als Tiefstellung und Hochstellung an das erste Kind angehängt sind.
Der Text innerhalb der Skripte verkleinert dargestellt wird.

Hinweis: Die MathML-Elemente <msub> und <msup> unterscheiden sich von den HTML-Elementen <sub> und <sup>. Sie ermöglichen es Autoren, beliebige MathML-Unterbäume als Skripte bereitzustellen, nicht nur Text.

Unterschriften und Überschriften

Die <munder>, <mover> und <munderover>-Elemente sind sehr ähnlich, außer dass sie verwendet werden, um Unterschriften und Überschriften anzubringen. Anstatt Details anzugeben, lassen wir Sie deren Definitionen selbst mit der folgenden Übung herausfinden.

Aktives Lernen: Erkennen Sie Unter-/Übersichten

Versuchen Sie im folgenden Beispiel, die Namen der mysteriösen Elemente (als Fragezeichen dargestellt) zu erraten und klicken Sie den Button, um die Lösung zu sehen:

<p>
  <code>&lt;<span>????????</span>&gt;</code> element with exactly two children
  (child1, child2):
  <math>
    <mover>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
    </mover>
  </math>
</p>
<p>
  <code>&lt;<span>????????</span>&gt;</code> element with exactly three children
  (child1, child2 and child3):
  <math>
    <munderover>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
      <mtext>child3</mtext>
    </munderover>
  </math>
</p>
<p>
  <code>&lt;<span>????????</span>&gt;</code> element with exactly two children
  (child1, child2):
  <math>
    <munder>
      <mtext>child1</mtext>
      <mtext>child2</mtext>
    </munder>
  </math>
</p>

<p><input type="button" id="showSolution" value="Show solution" /></p>

p {
  padding: 0.5em;
}

document.getElementById("showSolution").addEventListener("click", () => {
  const maths = Array.from(document.getElementsByTagName("math"));
  Array.from(document.getElementsByTagName("span")).forEach((span, index) => {
    span.textContent = maths[index].firstElementChild.tagName;
  });
});

Aktives Lernen: Erkennen Sie geskriptete Elemente

Die folgende MathML-Formel enthält einen komplexeren Ausdruck, der Brüche, Wurzeln und Skripte verschachtelt. Versuchen Sie, die mit geskripteten Elementen <msub>, <msup>, <msubsup>, <munder>, <mover>, <munderover> ausgelegten Elemente zu erraten. Jedes Mal, wenn Sie auf ein solches Element klicken, wird es hervorgehoben und eine Bestätigungsmeldung angezeigt. Lesen Sie schließlich die MathML-Quelle, um zu überprüfen, ob dies Ihrer Erwartung entspricht.

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My page with scripted elements</title>
    <link
      rel="stylesheet"
      href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body>
    <math display="block">
      <mroot>
        <mrow>
          <munder>
            <mi>β</mi>
            <mo>⎵</mo>
          </munder>
        </mrow>
        <mn>3</mn>
      </mroot>
      <mo>+</mo>
      <mfrac>
        <mrow>
          <mo>|</mo>
          <mover>
            <mi>α</mi>
            <mo>→</mo>
          </mover>
          <mo>|</mo>
        </mrow>
        <msup>
          <mi>s</mi>
          <mn>3</mn>
        </msup>
      </mfrac>
      <mo>−</mo>
      <mrow>
        <munderover>
          <mo>∑</mo>
          <mrow>
            <mi>i</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msqrt>
          <mrow>
            <msub>
              <mi>a</mi>
              <mi>i</mi>
            </msub>
            <mo>−</mo>
            <msubsup>
              <mi>K</mi>
              <mn>0</mn>
              <mi>i</mi>
            </msubsup>
          </mrow>
        </msqrt>
      </mrow>
    </math>
    <input type="button" id="clearOutput" value="Reset" />
    <div id="output"></div>
  </body>
</html>

.highlight {
  color: red;
}
math {
  font-size: 200%;
}

const scriptedElements = Array.from(
  document.querySelectorAll("msub, msup, msubsup, munder, mover, munderover"),
);
const outputDiv = document.getElementById("output");
function clearHighlight() {
  scriptedElements.forEach((scripted) => {
    scripted.classList.remove("highlight");
  });
}
scriptedElements.forEach((scripted) => {
  scripted.addEventListener("click", () => {
    clearHighlight();
    scripted.classList.add("highlight");
    outputDiv.insertAdjacentHTML(
      "beforeend",
      `<p><strong>You clicked an <code>&lt;${scripted.tagName}&gt;</code> element.</strong></p>`,
    );
  });
});
document.getElementById("clearOutput").addEventListener("click", () => {
  clearHighlight();
  outputDiv.textContent = "";
});

Weitere Operator-Eigenschaften

Wir haben bereits einige Eigenschaften des <mo>-Elements gesehen, nämlich das Strecken in vertikaler Richtung und den Abstand. Jetzt, da geskriptete Elemente verfügbar sind, können wir diese Liste erweitern. Wir werden dies tun, indem wir unser vorheriges Beispiel anpassen.

Strecken in horizontaler Richtung

Führen wir zunächst die Substitutionen $\beta := z*{1} + z*{2}$ und $\alpha := v*{1} + v*{2}$ durch:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My page with horizontal stretchy operators</title>
    <link
      rel="stylesheet"
      href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body>
    <math display="block">
      <mroot>
        <mrow>
          <munder>
            <mrow>
              <msub>
                <mi>z</mi>
                <mn>1</mn>
              </msub>
              <mo>+</mo>
              <msub>
                <mi>z</mi>
                <mn>2</mn>
              </msub>
            </mrow>
            <mo>⎵</mo>
          </munder>
        </mrow>
        <mn>3</mn>
      </mroot>
      <mo>+</mo>
      <mfrac>
        <mrow>
          <mo>|</mo>
          <mover>
            <mrow>
              <msub>
                <mi>v</mi>
                <mn>1</mn>
              </msub>
              <mo>+</mo>
              <msub>
                <mi>v</mi>
                <mn>2</mn>
              </msub>
            </mrow>
            <mo>→</mo>
          </mover>
          <mo>|</mo>
        </mrow>
        <msup>
          <mi>s</mi>
          <mn>3</mn>
        </msup>
      </mfrac>
      <mo>−</mo>
      <mrow>
        <munderover>
          <mo>∑</mo>
          <mrow>
            <mi>i</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msqrt>
          <mrow>
            <msub>
              <mi>a</mi>
              <mi>i</mi>
            </msub>
            <mo>−</mo>
            <msubsup>
              <mi>K</mi>
              <mn>0</mn>
              <mi>i</mi>
            </msubsup>
          </mrow>
        </msqrt>
      </mrow>
    </math>
  </body>
</html>

.highlight {
  color: red;
}
math {
  font-size: 200%;
}

Wir erkennen jetzt, dass die untere Klammer "⎵" und der Pfeil nach rechts "→" sich horizontal strecken, um die Breite der ersetzten Werte abzudecken. Erinnern Sie sich daran, dass einige vertikale Operatoren gestreckt werden können, um die Höhe von nicht gestreckten Geschwistern innerhalb eines <mrow> abzudecken. Ebenso können einige horizontale Operatoren sich strecken, um die Breite nicht gestreckter Geschwister in einem <munder>, <mover> oder <munderover>-Element abzudecken.

Hinweis: Das Strecken kann für jedes Kind des <munder>, <mover> oder <munderover>-Elements erfolgen, nicht nur für die Unterschrift oder Überschrift.

Großer Operator und Grenzen

Bisher wurde unser Beispiel tatsächlich mit dem display="block" Attribut gerendert. Schauen wir uns das gleiche Beispiel an, wie es ohne dieses Attribut gerendert wird:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My page with moved limits and small largeop</title>
    <link
      rel="stylesheet"
      href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body>
    <math>
      <mroot>
        <mrow>
          <munder>
            <mrow>
              <msub>
                <mi>z</mi>
                <mn>1</mn>
              </msub>
              <mo>+</mo>
              <msub>
                <mi>z</mi>
                <mn>2</mn>
              </msub>
            </mrow>
            <mo>⎵</mo>
          </munder>
        </mrow>
        <mn>3</mn>
      </mroot>
      <mo>+</mo>
      <mfrac>
        <mrow>
          <mo>|</mo>
          <mover>
            <mrow>
              <msub>
                <mi>v</mi>
                <mn>1</mn>
              </msub>
              <mo>+</mo>
              <msub>
                <mi>v</mi>
                <mn>2</mn>
              </msub>
            </mrow>
            <mo>→</mo>
          </mover>
          <mo>|</mo>
        </mrow>
        <msup>
          <mi>s</mi>
          <mn>3</mn>
        </msup>
      </mfrac>
      <mo>−</mo>
      <mrow>
        <munderover>
          <mo>∑</mo>
          <mrow>
            <mi>i</mi>
            <mo>=</mo>
            <mn>1</mn>
          </mrow>
          <mi>n</mi>
        </munderover>
        <msqrt>
          <mrow>
            <msub>
              <mi>a</mi>
              <mi>i</mi>
            </msub>
            <mo>−</mo>
            <msubsup>
              <mi>K</mi>
              <mn>0</mn>
              <mi>i</mi>
            </msubsup>
          </mrow>
        </msqrt>
      </mrow>
    </math>
  </body>
</html>

.highlight {
  color: red;
}
math {
  font-size: 200%;
}

Wie erwartet ist die Formel nicht mehr zentriert und die Darstellung ist so geändert, dass die Höhe minimiert wird. Konzentriert man sich auf das Summationssymbol, kann man feststellen, dass das Sigma kleiner gezeichnet und die Skripte des <munderover>-Elements nun als Tiefstellung und Hochstellung angehängt sind! Dies liegt an zwei Eigenschaften des "∑"-Operators:

largeop: Der Operator wird mit einem größeren Glyph gezeichnet, wenn das <math>-Tag ein display="block" Attribut hat.
movablelimits: Die Unterschriften und Überschriften, die dem Operator angehängt sind, werden als Tiefstellung und Hochstellung gerendert, wenn das <math>-Tag nicht das display="block" Attribut hat.

Hinweis: Die largeop-Eigenschaft ist tatsächlich nicht mit Skripten verbunden, obwohl Operatoren mit dieser Eigenschaft typischerweise geskriptet werden. Die movablelimits-Eigenschaft wird auch für <munder> und <mover>-Elemente berücksichtigt.

Zusammenfassung

In diesem Artikel haben wir das grundlegende Layout abgeschlossen, indem wir die Elemente <msub>, <msup>, <msubsup>, <munder>, <mover>, <munderover> für Tief- und Hochstellungen, Unterschriften und Überschriften eingeführt haben. Mit diesen Elementen konnten wir kurz neue Eigenschaften des <mo>-Elements einführen. Im nächsten Artikel werden wir uns weiterhin auf Tabellenlayout konzentrieren.