MathML 文字容器 - MathML | MDN

數學 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>∀A∊𝔰𝔩(n,𝔽),TrA=0</p>
  </body>
</html>

css

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

一點語義學

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

注意：一個顯而易見的區別是，使用 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> 元素的一些可觀察行為。在下一篇文章中，我們將學習如何利用令牌元素構建更復雜的表示式，例如分數和根號。

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年8月22日⁩，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題