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 的转换。