MathML skriptierte Elemente

Wir setzen die Untersuchung grundlegender mathematischer Notationen fort und konzentrieren uns darauf, MathML-Elemente mit Skripten zu erstellen.

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>

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

Sie sollten bemerken, dass:

Das zweite Kind des <msub>-Elements als Tiefstellung an das erste Kind angefügt wird.
Das zweite Kind des <msup>-Elements als Hochstellung an das erste Kind angefügt wird.
Die zweiten und dritten Kinder des <msubsup>-Elements werden jeweils als Tiefstellung und Hochstellung an das erste Kind angefügt.
Der Text innerhalb der Skripte wird verkleinert.

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

Unter- und Überstellungen

Die <munder>, <mover> und <munderover>-Elemente sind sehr ähnlich, außer dass sie verwendet werden, um Unter- und Überstellungen anzufügen. Anstatt ins Detail zu gehen, lassen wir Sie deren Definitionen mit der folgenden Übung selbst herausfinden.

Erkennen von Unter-/Überstellungen

Versuchen Sie im folgenden Beispiel, die Namen der geheimnisvollen Elemente (als Fragezeichen geschrieben) zu erraten, und klicken Sie auf den Button, um die Lösung zu zeigen:

<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 mathElems = Array.from(document.getElementsByTagName("math"));
  Array.from(document.getElementsByTagName("span")).forEach((span, index) => {
    span.textContent = mathElems[index].firstElementChild.tagName;
  });
});

Erkennen von skriptierten Elementen

Die folgende MathML-Formel enthält einen komplexeren Ausdruck, der Brüche, Wurzeln und Skripte verschachtelt. Versuchen Sie, die mit skriptierten Elementen <msub>, <msup>, <msubsup>, <munder>, <mover>, <munderover> angeordneten 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 Eigenschaften des Operators

Wir haben bereits einige Eigenschaften des <mo>-Elements wie das Strecken in vertikaler Richtung und das Spacing gesehen. Jetzt, da skriptierte Elemente verfügbar sind, können wir diese Liste erweitern. Wir werden das tun, indem wir unser vorheriges Beispiel abändern.

Strecken in horizontaler Richtung

Lassen Sie uns zuerst die Substitutionen $\beta := z*{1} + z*{2}$ und $\alpha := v*{1} + v*{2}$ durchführen:

<!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 Rechts-Pfeil "→" sich horizontal strecken, um die Breite der eingesetzten Werte abzudecken. Erinnern Sie sich, dass einige vertikale Operatoren sich strecken können, um die Höhe nicht-streckbarer Geschwister innerhalb eines <mrow> zu decken. Ebenso können sich einige horizontale Operatoren strecken, um die Breite nicht-streckbarer Geschwister in einem <munder>, <mover> oder <munderover>-Element zu decken.

Hinweis: Das Strecken kann bei jedem Kind des <munder>, <mover> oder <munderover>-Elements vorkommen, nicht nur beim Unterscript oder Überscript.

Großer Operator und Grenzen

Bisher wurde unser Beispiel tatsächlich mit dem display="block"-Attribut dargestellt. Sehen wir uns dasselbe Beispiel ohne dieses Attribut an:

<!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 wird geändert, um die Höhe zu minimieren. Mit Fokus auf das Summationssymbol kann man bemerken, dass das Sigma kleiner gezeichnet wird und dass die Skripte des <munderover>-Elements nun als Tiefstellung und Hochstellung angefügt 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 Unter- und Überskripte, die an den Operator angefügt sind, werden als Tiefstellung und Hochstellung gerendert, wenn das <math>-Tag nicht das display="block"-Attribut hat.

Hinweis: Die largeop-Eigenschaft ist tatsächlich unabhängig von Skripten, obwohl Operatoren mit dieser Eigenschaft typischerweise skriptiert sind. Die movablelimits-Eigenschaft wird auch für <munder>- und <mover>-Elemente berücksichtigt.

Zusammenfassung

In diesem Artikel haben wir die grundlegende Layoutvorstellung der Elemente <msub>, <msup>, <msubsup>, <munder>, <mover>, <munderover> für Tief-, Hoch-, Unter- und Überstellungen abgeschlossen. Mit diesen Elementen konnten wir kurz neue Eigenschaften des <mo>-Elements einführen. Im nächsten Artikel werden wir uns weiterhin auf tabellarisches Layout konzentrieren.

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden