MathML-Skript-Elemente

Wir setzen die Übersicht der grundlegenden mathematischen Notationen fort und konzentrieren uns auf den Aufbau von MathML-Elementen mit Skripten.

Tief- und Hochstellungen

Ähnlich wie im vorherigen Artikel gesehen, haben <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 sehen Sie die Darstellung des obigen Beispiels in Ihrem Browser.

Sie sollten bemerken:

Das zweite Kind des <msub>-Elements ist als Tiefstellung an sein erstes Kind angefügt.
Das zweite Kind des <msup>-Elements ist als Hochstellung an sein erstes Kind angefügt.
Die zweiten und dritten Kinder des <msubsup>-Elements sind als Tief- und Hochstellung an sein erstes Kind angefügt.
Der Text innerhalb von Skripten ist verkleinert.

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

Unter- und Überschriften

Die <munder>, <mover> und <munderover>-Elemente sind sehr ähnlich, außer dass sie verwendet werden, um Unterschriften und Überschriftungen anzufügen. Anstatt Details zu geben, lassen wir Sie ihre Definitionen selbst herausfinden mit der folgenden Übung.

Erkennen von Unter-/Überschriften

Versuchen Sie im folgenden Beispiel, die Namen der geheimnisvollen Elemente (als Fragezeichen geschrieben) zu erraten und klicken Sie auf die Schaltfläche, um die Lösung zu enthüllen:

<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;
  });
});

Erkennen von Skript-Elementen

Die folgende MathML-Formel enthält einen komplexeren Ausdruck, der Brüche, Wurzeln und Skripte verschachtelt. Versuchen Sie, die Elemente zu erraten, die mit den Skript-Elementen <msub>, <msup>, <msubsup>, <munder>, <mover>, <munderover> ausgelegt sind. Jedes Mal, wenn Sie auf ein solches Element klicken, wird es hervorgehoben und eine Bestätigungsnachricht 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 zuvor einige Eigenschaften des <mo>-Elements gesehen, nämlich das Strecken in vertikaler Richtung und den Abstand. Da nun Skript-Elemente verfügbar sind, können wir diese Liste erweitern. Wir werden dies tun, indem wir unser vorheriges Beispiel anpassen.

Strecken in horizontaler Richtung

Lassen Sie uns zunächst 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 nun, dass die untere Klammer "⎵" und der Rechtspfeil "→" sich horizontal strecken, um die Breite der substituierten Werte abzudecken. Erinnern Sie sich daran, dass einige vertikale Operatoren sich strecken können, um die Höhe nicht-streckbarer Geschwister innerhalb eines <mrow> abzudecken. Ähnlich können einige horizontale Operatoren sich strecken, um die Breite nicht-streckbarer Geschwister in einem <munder>, <mover> oder <munderover>-Element abzudecken.

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

Großer Operator und Grenzwerte

Bisher wurde unser Beispiel tatsächlich mit dem Attribut display="block" gerendert. Schauen wir 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 wird geändert, um die Höhe zu minimieren. Blickt man auf das Summenzeichen, kann man feststellen, dass das Sigma kleiner gezeichnet ist und dass die Skripte des <munderover>-Elements jetzt als Tief- und Hochstellung angefügt sind! Dies liegt an zwei Eigenschaften des „∑“-Operators:

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

Hinweis: Die largeop-Eigenschaft ist eigentlich unabhängig von Skripten, obwohl Operatoren, die diese Eigenschaft haben, typischerweise geskriptet sind. Die movablelimits-Eigenschaft wird auch für <munder> und <mover>-Elemente berücksichtigt.

Zusammenfassung

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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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