MathML Textbehälter

Nun, da Sie eine bessere Vorstellung von MathML haben, konzentrieren wir uns auf Textbehälter (Variablen, Zahlen, Operatoren, ...), die als Bausteine von MathML-Formeln dienen.

Unicode-Zeichen für Mathematik

Mathematische Formeln beinhalten viele Sonderzeichen, zum Beispiel griechische Buchstaben (z. B. Δ), Frakturbuchstaben (z. B. 𝔄), doppelt durchgestrichene Buchstaben (z. B. ℂ), binäre Operatoren (z. B. ≠), Pfeile (z. B. ⇒), Integralzeichen (z. B. ∮), Summenzeichen (z. B. ∑), logische Symbole (z. B. ∀), Klammern (z. B. ⌊) und viele mehr. Der Wikipedia-Artikel Mathematische Operatoren und Symbole in Unicode bietet einen guten Überblick über die verwendeten Zeichen.

Da die meisten dieser Zeichen nicht Teil des Basic Latin Unicode Blocks sind, wird empfohlen, die Zeichenkodierung Ihres Dokuments anzugeben und es mit geeigneten Webfonts zu versehen. Hier ist eine grundlegende Vorlage, um die UTF-8-Kodierung und die Latin Modern Math Schriftart zu verwenden:

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My page with math characters</title>
    <link
      rel="stylesheet"
      href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body>
    <p>∀A∊𝔰𝔩(n,𝔽),TrA=0</p>
  </body>
</html>

css

p {
  font-family: "Latin Modern Math", math;
}

Ein wenig Semantik

Wir bemerkten im Artikel Erste Schritte mit MathML, dass der Text in MathML-Formeln in speziellen Container-Elementen wie <mn> oder <mo> eingeschlossen ist. Allgemeiner gesagt, muss jeder Text in MathML-Formeln in solchen Container-Elementen, sogenannten Token-Elementen, enthalten sein. Darüber hinaus bietet MathML mehrere Token-Elemente, um verschiedene Bedeutungen des Textinhalts zu unterscheiden:

Das <mi> Element, das einen "Bezeichner" darstellt, welcher ein symbolischer Name oder beliebiger Text sein könnte. Beispiele: <mi>x</mi> (Variable), <mi>cos</mi> (Funktionsname) und <mi>π</mi> (symbolische Konstante).
Das <mn> Element stellt eine "numerische Literal" oder andere Daten dar, die als numerische Literal gerendert werden sollten. Beispiele: <mn>2</mn> (Ganzzahl), <mn>0.123</mn> (Dezimalzahl) oder <mn>0xFFEF</mn> (hexadezimaler Wert).
Das <mo> Element stellt einen Operator oder irgendetwas dar, das als Operator gerendert werden sollte. Zum Beispiel <mo>+</mo> (binäre Operation), <mo>≤</mo> (binäre Relation), <mo>∑</mo> (Summenzeichen) oder <mo>[</mo> (Klammer).
Das <mtext> Element wird verwendet, um beliebigen Text darzustellen. Zum Beispiel kurze Wörter in Formeln wie <mtext>wenn<mtext> oder <mtext>abbildet auf</mtext>.

Sie sind dran: Erkennen von Token-Elementen

Unten steht ein komplexeres Beispiel, das besagt, dass der Absolutwert einer reellen Zahl gleich dieser Zahl ist, wenn und nur wenn sie nicht negativ ist. Wir möchten, dass Sie versuchen, die verschiedenen Token-Elemente zu erkennen und wofür diese verwendet werden. Jedes Mal, wenn Sie den entsprechenden Text anklicken, wird er hervorgehoben und eine Bestätigungsmeldung wird angezeigt.

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My page with math characters</title>
    <link
      rel="stylesheet"
      href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body>
    <math display="block">
      <mrow>
        <mrow>
          <mo>|</mo>
          <mi>x</mi>
          <mo>|</mo>
        </mrow>
        <mo>=</mo>
        <mi>x</mi>
      </mrow>
      <mtext>&nbsp;iff&nbsp;</mtext>
      <mrow>
        <mi>x</mi>
        <mo>≥</mo>
        <mn>0</mn>
      </mrow>
    </math>
    <input type="button" id="clearOutput" value="Reset" />
    <div id="output"></div>
  </body>
</html>

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

const tokenElements = Array.from(
  document.querySelectorAll("mi, mo, mn, mtext"),
);
const outputDiv = document.getElementById("output");
function clearHighlight() {
  tokenElements.forEach((token) => {
    token.classList.remove("highlight");
  });
}
tokenElements.forEach((token) => {
  token.addEventListener("click", () => {
    clearHighlight();
    token.classList.add("highlight");
    outputDiv.insertAdjacentHTML(
      "beforeend",
      `<p><strong>You clicked an <code>&lt;${token.tagName}&gt;</code> element.</strong></p>`,
    );
  });
});
document.getElementById("clearOutput").addEventListener("click", () => {
  clearHighlight();
  outputDiv.textContent = "";
});

Lesen Sie schließlich den MathML-Quellcode, um zu prüfen, ob dieser Ihren Erwartungen entspricht:

xml

<math display="block">
  <mrow>
    <mrow>
      <mo>|</mo>
      <mi>x</mi>
      <mo>|</mo>
    </mrow>
    <mo>=</mo>
    <mi>x</mi>
  </mrow>
  <mtext>&nbsp;iff&nbsp;</mtext>
  <mrow>
    <mi>x</mi>
    <mo>≥</mo>
    <mn>0</mn>
  </mrow>
</math>

Hinweis: Es ist manchmal schwierig zu entscheiden, welches Token-Element für einen gegebenen Textinhalt verwendet werden soll. In der Praxis sollte die Wahl des falschen Elements keine größeren Probleme verursachen, da alle Token-Elemente von Browserimplementierungen in der Regel gleich gerendert werden (für die visuelle Anzeige und für unterstützende Technologien). Jedoch haben die <mi> und <mo> Elemente spezielle unterscheidende Merkmale, die einem bewusst sein sollten. Diese werden in den folgenden Abschnitten erklärt.

Automatische Kursivierung von <mi>

Eine typografische Konvention in der Mathematik ist die Verwendung kursiver Buchstaben für Variablen. Um dies zu erleichtern, können <mi> Elemente mit einem einzelnen Zeichen automatisch kursiv dargestellt werden. Dies gilt für alle Buchstaben aus den lateinischen und griechischen Alphabeten. Vergleichen Sie die Darstellung der beiden <mi> Elemente in der folgenden Formel:

html

<math>
  <mi>sin</mi>
  <mi>x</mi>
</math>

Hinweis: Diese Tabelle von MathML Core bietet die vollständige Liste der Zeichen, die kursiv dargestellt werden, zusammen mit den entsprechenden kursiven Zeichen.

Rückgängigmachung der automatischen Kursivierung von <mi>

Um diese standardmäßige Kursivtransformation rückgängig zu machen, können Sie das Attribut mathvariant="normal" am <mi> Element anfügen. Vergleichen Sie die Darstellung der Großbuchstaben Gamma in der folgenden Formel:

html

<math>
  <mi>Γ</mi>
  <mi mathvariant="normal">Γ</mi>
</math>

Hinweis: Obwohl Sie diese Transformation anwenden können, würden Sie normalerweise einfach die gewünschten Mathematischen alphanumerischen Symbole verwenden.

Operatoreneigenschaften von <mo>

MathML enthält ein Operator-Wörterbuch, das die Standardeigenschaften von <mo> Elementen abhängig von ihrem Inhalt und der Position innerhalb seines Containers definiert (Präfix, Infix oder Postfix). Betrachten wir ein konkretes Beispiel:

html

<table>
  <tbody>
    <tr>
      <td>Prefix plus</td>
      <td>
        <math>
          <mo>+</mo>
          <mi>i</mi>
        </math>
      </td>
    </tr>
    <tr>
      <td>Infix plus</td>
      <td>
        <math>
          <mi>j</mi>
          <mo>+</mo>
          <mi>i</mi>
        </math>
      </td>
    </tr>
    <tr>
      <td>Prefix sum</td>
      <td>
        <math>
          <mo>∑</mo>
          <mi>i</mi>
        </math>
      </td>
    </tr>
  </tbody>
</table>

Dieses Beispiel sollte ähnlich der untenstehenden Bildschirmaufnahme gerendert werden. Beachten Sie den Abstand zwischen den <mi>i</mi> Elementen und dem vorausgehenden <mo>: kein Abstand für das Präfixzeichen Plus, etwas Abstand für das Infixzeichen Plus und ein etwas kleinerer Abstand für das Präfix-Summationszeichen.

$Screenshot der MathML-Formel mit unterschiedlichem Operatorabstand$

Operatoren haben viele andere Eigenschaften, die wir später noch näher erläutern werden. Merken Sie sich für jetzt, einen <mo> Container für Zeichen im Operator-Wörterbuch zu verwenden und Unterausdrücke korrekt mit <mrow> Elementen zu gruppieren, um MathML-Renderern zu helfen.

Spotten Sie den Unterschied

Nun, da Sie mit speziellen Merkmalen von <mi> und <mo> etwas vertraut sind, möchten wir, dass Sie das <p> Element im Beispiel oben auf der Seite mit einigen tatsächlichen MathML-Elementen neu schreiben. Vergleichen Sie die visuelle Darstellung in Ihrem Browser und erklären Sie die Unterschiede zur nur-Text-Version.

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My page with math characters</title>
    <link
      rel="stylesheet"
      href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body>
    <p class="text">∀A∊𝔰𝔩(n,𝔽),TrA=0</p>
    <p>
      <math>
        <mo>∀</mo>
        <mrow>
          <mi>A</mi>
          <mo>∊</mo>
          <mrow>
            <mi>𝔰𝔩</mi>
            <mrow>
              <mo>(</mo>
              <mi>n</mi>
              <mo>,</mo>
              <mi>𝔽</mi>
              <mo>)</mo>
            </mrow>
          </mrow>
        </mrow>
        <mo>,</mo>
        <mrow>
          <mrow>
            <mi>Tr</mi>
            <mi>A</mi>
          </mrow>
          <mo>=</mo>
          <mn>0</mn>
        </mrow>
      </math>
    </p>
    <input id="showSolution" type="button" value="Show solution" />
    <div id="solution"></div>
  </body>
</html>

div {
  padding: 0.5em;
}

.text {
  font-family: "Latin Modern Math", math;
}

document.getElementById("showSolution").addEventListener(
  "click",
  () => {
    document.getElementById("solution").insertAdjacentHTML(
      "beforeEnd",
      `<ul>
      <li><strong>The <code>&lt;mi&gt;</code> elements containing the "A" and "n" variables are rendered in italic</strong>. However, the <code>&lt;mi&gt;</code> elements with multiple characters "𝔰𝔩" or whose character is "𝔽" are still rendered upright.</li>
      <li><strong>Spacing is automatically added around the <code>&lt;mo&gt;</code> elements whose text is "∀", "∊", "=" or a comma</strong>. However, some of them have no spacing added before while the parentheses still have no spacing around them.</li>
    </ul>`,
    );
  },
  { once: true },
);

Hinweis: Ein offensichtlicher Unterschied ist, dass der Quellcode mit MathML viel ausführlicher wurde. Erinnern Sie sich daran, dass es in diesem Tutorial darum geht, die Sprache zu lernen, aber in der Praxis wird MathML-Inhalt im Allgemeinen nicht manuell geschrieben. Weitere Informationen finden Sie auf der Seite MathML-Autorenschaft.

Erkennung dehnbarer Operatoren

Das Operator-Wörterbuch definiert eine Standard-dehnbare Eigenschaft sowie die entsprechende Dehnachse für einige Operatoren. Beispielsweise kann ein Operator standardmäßig vertikal gedehnt werden, um die maximale Höhe nicht-dehnbarer Geschwister innerhalb seines <mrow> Containers abzudecken. Durch Anpassen einer früheren Übung können Operatoren vertikal gedehnt werden. Können Sie sie finden?

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My page with stretchy operators</title>
    <link
      rel="stylesheet"
      href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />
  </head>
  <body>
    <math display="block">
      <mrow>
        <mrow>
          <mo>|</mo>
          <mfrac>
            <mn>1</mn>
            <mi>x</mi>
          </mfrac>
          <mo>|</mo>
        </mrow>
        <mo>=</mo>
        <mfrac>
          <mn>1</mn>
          <mrow>
            <mo>|</mo>
            <mi>x</mi>
            <mo>|</mo>
          </mrow>
        </mfrac>
        <mo>=</mo>
        <mfrac>
          <mn>1</mn>
          <mi>x</mi>
        </mfrac>
      </mrow>
      <mtext>&nbsp;iff&nbsp;</mtext>
      <mrow>
        <mi>x</mi>
        <mo>≥</mo>
        <mn>0</mn>
      </mrow>
    </math>
    <input type="button" id="clearOutput" value="Reset" />
    <div id="output"></div>
  </body>
</html>

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

const tokenElements = Array.from(
  document.querySelectorAll("mi, mo, mn, mtext"),
);
const stretchyMoElements = Array.from(
  document.getElementsByTagName("mo"),
).slice(0, 2);
const outputDiv = document.getElementById("output");
function clearHighlight() {
  tokenElements.forEach((token) => {
    token.classList.remove("highlight");
  });
}
tokenElements.forEach((token) => {
  token.addEventListener("click", () => {
    clearHighlight();
    token.classList.add("highlight");
    let message = "";
    let tagName = `<code>&lt;${token.tagName}&gt;</code>`;
    if (token.tagName !== "mo") message = `No, this is an ${tagName} element!`;
    else if (!stretchyMoElements.includes(token))
      message = `No, this is an ${tagName} element, but it's not vertically stretched.`;
    else
      message = `Correct, this ${tagName} element is indeed stretched to the height of its <code>&lt;mfrac&gt;</code> sibling.`;
    outputDiv.insertAdjacentHTML(
      "beforeend",
      `<p><strong>${message}</strong></p>`,
    );
  });
});
document.getElementById("clearOutput").addEventListener("click", () => {
  clearHighlight();
  outputDiv.textContent = "";
});

Wie immer sind Sie eingeladen, den Quellcode zu lesen, wenn Sie fertig sind:

xml

<math display="block">
  <mrow>
    <mrow>
      <mo>|</mo>
      <mfrac>
        <mn>1</mn>
        <mi>x</mi>
      </mfrac>
      <mo>|</mo>
    </mrow>
    <mo>=</mo>
    <mfrac>
      <mn>1</mn>
      <mrow>
        <mo>|</mo>
        <mi>x</mi>
        <mo>|</mo>
      </mrow>
    </mfrac>
    <mo>=</mo>
    <mfrac>
      <mn>1</mn>
      <mi>x</mi>
    </mfrac>
  </mrow>
  <mtext>&nbsp;iff&nbsp;</mtext>
  <mrow>
    <mi>x</mi>
    <mo>≥</mo>
    <mn>0</mn>
  </mrow>
</math>

Warnung: Spezielle Mathematik-Schriftarten sind im Allgemeinen erforderlich, um dieses Dehnen zu ermöglichen, das vorherige Beispiel verwendet Webfonts.

Zusammenfassung

In diesem Artikel haben wir einige Token Elemente kennengelernt, die als Textbehälter dienen, sowie ihre unterschiedlichen Semantiken, nämlich <mi> (Identifier), <mn> (Zahlen), <mo> (Operatoren), <mtext> (generischer Text). Wir haben spezielle Unicode-Zeichen betrachtet, die häufig in mathematischen Formeln vorkommen und einen Überblick über einige beobachtbare Verhaltensweisen der <mi> und <mo> Elemente gegeben. Im nächsten Artikel werden wir sehen, wie man Token Elemente verwendet, um viel komplexere Ausdrücke wie Brüche und Wurzeln zu erstellen.

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