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 字型以及適當的樣式表。例如，只需在文件標題中插入以下行即可選擇帶後備 Web 字型的 Latin Modern 字型

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 語言）轉換的工具。

客戶端轉換

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

可以使用自定義元素來託管原始碼，並確保透過影子樹插入和呈現相應的 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

執行該命令後，將建立一個包含以下 HTML 輸出的檔案 output.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 的轉換。