編寫 MathML

本文件說明了如何使用 MathML 語言編寫數學公式。MathML 是一種用文字格式描述的標籤和屬性。就像 HTML 或 SVG 一樣，對於複雜的數學內容，這種文字格式可能會非常冗長，因此需要合適的創作工具，例如從輕量級標記語言或所見即所得公式編輯器轉換的工具。市面上有許多這類工具，無法在此一一列舉。因此，本文將重點介紹常見的做法和示例。

使用 MathML

儘管您的 MathML 公式很可能由創作工具生成，但瞭解一些技巧以將其正確整合到文件中仍然很重要。

HTML 頁面中的 MathML

每個 MathML 方程都由一個根 math 元素表示，該元素可以直接嵌入到 HTML 頁面中。預設情況下，公式將以內聯方式呈現，並進行額外調整以最小化其高度。使用 display="block" 屬性可以正常渲染複雜公式，並使其獨佔一段。

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>MathML in HTML</title>
  </head>
  <body>
    <h1>MathML in HTML</h1>

    <p>
      One over square root of two (inline style):
      <math>
        <mfrac>
          <mn>1</mn>
          <msqrt>
            <mn>2</mn>
          </msqrt>
        </mfrac>
      </math>
    </p>

    <p>
      One over square root of two (display style):
      <math display="block">
        <mfrac>
          <mn>1</mn>
          <msqrt>
            <mn>2</mn>
          </msqrt>
        </mfrac>
      </math>
    </p>
  </body>
</html>

注意：要在 XML 文件（例如 XHTML、EPUB 或 OpenDocument）中使用 MathML，請在每個 <math> 元素上新增一個顯式的 xmlns="http://www.w3.org/1998/Math/MathML" 屬性。

注意：一些電子郵件或即時訊息客戶端能夠以 HTML 格式傳送和接收訊息。因此，可以在此類訊息中嵌入數學公式，只要 MathML 標籤不被標記清理程式過濾掉。

無 MathML 支援的瀏覽器回退方案

建議為不支援 MathML 的瀏覽器提供回退機制。如果您的文件僅包含基本的數學公式，那麼一個小的 mathml.css 樣式表可能就足夠了。要條件性地載入它，只需在文件頭部插入一行：

html

<script src="https://fred-wang.github.io/mathml.css/mspace.js"></script>

如果您需要更復雜的構造，可以考慮使用更重的 MathJax 庫作為 MathML 的 polyfill。

html

<script src="https://fred-wang.github.io/mathjax.js/mpadded-min.js"></script>

或者，您也可以在頁面頂部顯示一個警告，告知瀏覽器沒有良好的 MathML 支援，並讓使用者選擇上述回退方案中的一個。

html

<script src="https://fred-wang.github.io/mathml-warning.js/mpadded-min.js"></script>

注意：這些小指令碼會執行功能檢測（檢測 mspace 或 mpadded 元素），這比瀏覽器嗅探更可取。此外，它們是在開源許可證下分發的，因此您可以隨意將其複製到自己的伺服器上並根據需要進行調整。

數學字型

正如 MathML 字型文章中所解釋的，數學字型對於渲染 MathML 內容至關重要。因此，分享這類字型的安裝說明或將其作為 Web 字型提供始終是個好主意。

MathFonts 頁面提供了此類 Web 字型以及相應的樣式表。例如，只需在文件頭部插入以下行，即可選擇 Latin Modern 字型並提供回退 Web 字型：

html

<link
  rel="stylesheet"
  href="https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css" />

提供了幾種字型，您可以選擇不同的樣式，例如 STIX。

html

<link
  rel="stylesheet"
  href="https://fred-wang.github.io/MathFonts/STIX/mathfonts.css" />

注意：該 MathFonts 頁面的字型和樣式表是在開源許可證下分發的，因此您可以隨意將其複製到自己的伺服器上並根據需要進行調整。

從簡單語法轉換

本節將介紹一些工具，用於將 MathML 從輕量級標記語言（如流行的 LaTeX 語言）轉換為 MathML。

客戶端轉換

透過這種方法，公式直接編寫在網頁中，然後一個 JavaScript 庫負責將其轉換為 MathML。這可能是最簡單的方法，但也有一些問題：需要載入和執行額外的 JavaScript 程式碼，作者必須轉義保留字元，Web 爬蟲將無法訪問 MathML 輸出……

可以使用自定義元素來託管原始碼，並確保透過 shadow subtree 插入和渲染相應的 MathML 輸出。例如，使用 TeXZilla 的 <la-tex> 元素，上面的 MathML 示例可以更簡潔地重寫如下：

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>MathML in HTML5</title>
    <script src="https://fred-wang.github.io/TeXZilla/TeXZilla-min.js"></script>
    <script src="https://fred-wang.github.io/TeXZilla/examples/customElement.js"></script>
  </head>
  <body>
    <h1>MathML in HTML5</h1>

    <p>
      One over square root of two (inline style):
      <la-tex>\frac{1}{\sqrt{2}}</la-tex>
    </p>

    <p>
      One over square root of two (display style):
      <la-tex display="block">\frac{1}{\sqrt{2}}</la-tex>
    </p>
  </body>
</html>

對於不熟悉 LaTeX 的作者，還有其他輸入方法，例如 ASCIIMath 或 jqMath 語法。請務必載入 JavaScript 庫並使用正確的定界符。

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>ASCII MathML</title>
    …
    <!-- ASCIIMathML.js -->
    <script src="/path/to/ASCIIMathML.js"></script>
    …
    <!-- jqMath -->
    <script src="https://mathscribe.com/mathscribe/jquery-1.4.3.min.js"></script>
    <script src="https://mathscribe.com/mathscribe/jqmath-etc-0.4.6.min.js"></script>
    …
  </head>
  <body>
    …
    <p>One over square root of two (inline style, ASCIIMath): `1/(sqrt 2)`</p>
    …
    <p>One over square root of two (inline style, jqMath): $1/√2$</p>
    …
    <p>One over square root of two (display style, jqMath): $$1/√2$$</p>
    …
  </body>
</html>

命令列程式

您不必在頁面載入時生成 MathML 表示式，而是可以依賴命令列工具。這將生成載入速度更快的靜態 MathML 內容的頁面。讓我們再次考慮一個包含來自客戶端轉換內容的頁面 input.html。

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>MathML in HTML5</title>
  </head>
  <body>
    <h1>MathML in HTML5</h1>
    <p>One over square root of two (inline style): $\frac{1}{\sqrt{2}}$</p>
    <p>One over square root of two (display style): $$\frac{1}{\sqrt{2}}$$</p>
  </body>
</html>

該頁面不包含任何 script 標籤。相反，轉換透過以下命令列使用 Node.js 和 TeXZilla 執行。

bash

cat input.html | node TeXZilla.js streamfilter > output.html

執行該命令後，會建立一個名為 output.html 的檔案，其中包含以下 HTML 輸出。用美元符號括起來的公式已被轉換為 MathML。

html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>MathML in HTML5</title>
  </head>
  <body>
    <h1>MathML in HTML5</h1>

    <p>
      One over square root of two (inline style):
      <math><semantics><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><annotation encoding="TeX">\frac{1}{\sqrt{2}}</annotation></semantics></math>
    </p>

    <p>
      One over square root of two (display style):
      <math display="block"><semantics><mfrac><mn>1</mn><msqrt><mn>2</mn></msqrt></mfrac><annotation encoding="TeX">\frac{1}{\sqrt{2}}</annotation></semantics></math>
    </p>
  </body>
</html>

還有更復雜的工具，旨在將任意 LaTeX 文件轉換為包含 MathML 內容的文件。例如，使用 LaTeXML，以下命令會將 foo.tex 轉換為 HTML 或 EPUB 文件：

bash

latexmlc --dest foo.html foo.tex # Generate a HTML document foo.html
latexmlc --dest foo.epub foo.tex # Generate an EPUB document foo.epub

latexmlc 接受一個 --javascript 引數，您可以使用它來包含上面提到的回退指令碼之一。

bash

latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathml.css/mspace.js foo.tex  # Add the CSS fallback
latexmlc --dest foo.html --javascript=https://fred-wang.github.io/mathjax.js/mpadded-min.js foo.tex # Add the MathJax fallback

注意：命令列工具可以在伺服器端使用，例如 MediaWiki 透過 Mathoid 執行 LaTeX 到 MathML 的轉換。