MathML 文字容器

現在您對 MathML 有了更深入的瞭解，我們將重點關注文字容器（變數、數字、運算子等），它們用作 MathML 公式的基本構建塊。

先決條件	安裝基本軟體，瞭解檔案操作的基本知識，HTML 基礎知識（學習 HTML 簡介）以及一些關於文字樣式的 CSS 概念（閱讀文字和字型樣式基礎和網頁字型）。
目標	熟悉用於編寫文字的 MathML 元素並瞭解其特殊行為。

數學的 Unicode 字元

數學公式包含許多特殊字元，例如希臘字母（例如 Δ）、哥特體字母（例如 𝔄）、雙線字母（例如 ℂ）、二元運算子（例如 ≠）、箭頭（例如 ⇒）、積分符號（例如 ∮）、求和符號（例如 ∑）、邏輯符號（例如 ∀）、圍欄（例如 ⌊）等等。維基百科的文章 Unicode 中的數學運算子和符號提供了所用字元的良好概述。

由於大多數這些字元不屬於基本拉丁 Unicode 塊，因此建議指定您的文件字元編碼並使用適當的網頁字型提供服務。這是一個使用 UTF-8 編碼和 Latin Modern Math 字型的基本模板

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 style="font-family: Latin Modern Math">∀A∊𝔰𝔩(n,𝔽),TrA=0</p>
  </body>
</html>

一點語義

我們在 MathML 入門文章中注意到，MathML 公式中的文字包含在特定的容器元素中，例如 <mn> 或 <mo>。更一般地，MathML 公式中的每個文字都必須包含在這樣的容器元素中，稱為標記元素。此外，MathML 提供了多個標記元素以區分文字內容的不同含義

<mi> 元素表示“識別符號”，可以是符號名稱或任意文字。例如：<mi>x</mi>（變數）、<mi>cos</mi>（函式名）和 <mi>π</mi>（符號常量）。
<mn> 元素表示“數字文字”或應呈現為數字文字的其他資料。例如：<mn>2</mn>（整數）、<mn>0.123</mn>（十進位制數）或 <mn>0xFFEF</mn>（十六進位制值）。
<mo> 元素表示運算子或應呈現為運算子的任何內容。例如 <mo>+</mo>（二元運算）、<mo>≤</mo>（二元關係）、<mo>∑</mo>（求和符號）或 <mo>[</mo>（圍欄）。
<mtext> 元素用於表示任意文字。例如公式中的短語，如 <mtext>if<mtext> 或 <mtext>maps to</mtext>。

主動學習：識別標記元素

下面是一個更復雜的示例，它說明實數的絕對值等於該數當且僅當它是非負數。找出不同的標記元素及其用途。每次單擊相應的文字時，它都會突出顯示並顯示確認訊息。

<!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 = "";
});

最後，閱讀 MathML 原始碼以驗證它是否符合您的預期

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>

注意：有時很難確定對給定文字內容使用哪個標記元素。在實踐中，選擇錯誤的元素不應造成重大問題，因為所有標記元素通常都以相同的方式由瀏覽器實現呈現（用於視覺顯示和輔助技術）。但是，<mi> 和 <mo> 元素具有應注意的特殊區分特徵。它們將在以下部分中進行解釋。

自動斜體化 <mi>

數學中的一種排版約定是使用斜體字母表示變數。為了幫助實現這一點，包含單個字元的 <mi> 元素可能會自動呈現為斜體。拉丁字母和希臘字母的所有字母都是這種情況。比較以下公式中兩個 <mi> 元素的渲染效果

html

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

注意：MathML Core 中的此表提供了應進行斜體化的字元的完整列表，以及相應的斜體字元。

恢復 <mi> 的自動斜體化

為了恢復此預設斜體轉換，您可以在 <mi> 元素上附加一個 mathvariant="normal" 屬性。比較以下公式中大寫伽馬字母的渲染效果

html

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

注意：雖然您可以應用此轉換，但通常您只需使用所需的數學字母數字符號。

<mo> 的運算子屬性

MathML 包含一個運算子詞典，它根據其內容及其在容器中的位置（字首、中綴或字尾）定義 <mo> 元素的預設屬性。讓我們考慮一個具體的例子

html

<table>
  <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>
</table>

此示例應類似於以下螢幕截圖。觀察 <mi>i</mi> 元素與其前面的 <mo> 之間的間距：字首加號沒有間距，中綴加號有一些間距，字首求和符號有一些較小的間距。

$Screenshot of the MathML formula with different operator spacing$

運算子還有許多其他屬性，我們將在後面更詳細地介紹。現在，請記住對運算子詞典中的字元使用 <mo> 容器，並使用 <mrow> 元素正確地對子表示式進行分組，以幫助 MathML 渲染器。

主動學習：發現差異

現在您已經對 <mi> 和 <mo> 的特殊功能有所瞭解，讓我們使用一些實際的 MathML 重寫頁面頂部的示例中的 <p> 元素。比較瀏覽器中的視覺呈現，並解釋與純文字版本的差異。

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 style="font-family: Latin Modern Math">∀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;
}

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

注意：一個明顯的區別是，使用 MathML 後原始碼變得冗長得多。請記住，本教程是關於學習語言的，但在實踐中，MathML 內容通常不會手動編寫。有關更多資訊，請參閱編寫 MathML 頁面。

主動學習：可伸縮運算子

運算子詞典還定義了預設的可伸縮屬性以及某些運算子的相應伸縮軸。例如，運算子可以預設垂直伸展以覆蓋其 <mrow> 容器內非伸縮同級元素的最大高度。透過稍微調整之前的練習，可以使運算子垂直伸展。你能找到它們嗎？

<!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 = "";
});

像往常一樣，建議您完成後閱讀原始碼

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>

警告：通常需要特殊的數學字型來使這種伸縮成為可能，前面的示例依賴於網頁字型。

總結

在本文中，我們學習了一些用作文字容器的標記元素及其不同的語義，即 <mi>（識別符號）、<mn>（數字）、<mo>（運算子）、<mtext>（通用文字）。我們已經瞭解了數學公式中常見的特殊 Unicode 字元，並概述了 <mi> 和 <mo> 元素的一些可觀察行為。在下一篇文章中，我們將瞭解如何依靠標記元素來構建更復雜的表示式，例如分數和根。