MathML详细解析

MathML（数学标记语言）是一种基于XML的语言，用于在web页面上使用分数、脚本、根号、矩阵、积分、级数等编写数学公式。MathML最初是作为一种独立的XML语言设计的，但MathML通常嵌入HTML文档中，可以被视为HTML的扩展。

MathML最初是作为浏览器、办公套件、计算机代数系统、EPUB阅读器和基于latex的生成器的通用规范设计的。然而，这种方法不太适合Web：专注于语义的子集从未在浏览器中实现过，而专注于数学布局的子集导致浏览器实现不完整和不一致。

MathML Core是一个子集，它增加了基于LaTeX和Open Font Format规则的实现细节。它是为浏览器量身定制的，专门设计用于与其他web标准，包括HTML、CSS、 DOM和JavaScript。

这一部分，我们就来学习一下MathML及其相关的元素。注意：MathML使用与HTML相同的语法来表示元素和属性树。

$$

$$元素是顶级MathML元素，用于编写单个数学公式。每个数学公式都由一个元素$$表示。该元素可以直接放置在HTML页面中。

属性

MathML元素有自己的全局属性 – 全局MathML属性。除了全局MathML属性外，$$还含有一个display属性，指定应如何呈现包含的MathML标记。其允许的值为block和inline其中之一，其含义如下：

• block，表示此元素将显示在当前文本范围之外的自己的块中，并且math-style设置为normal。
• inline，表示此元素将显示在当前文本范围内，并将math-style设置为compact。

该属性默认值为inline。

总体布局

元素用于对子表达式进行分组。这些子表达式通常包含一个或多个运算符及其各自的操作数（例如和）。此元素呈现为包含其参数的水平行。

在编写MathML表达式时，应将中的元素按照表达式的数学解释中的分组方式进行分组。正确的分组可以在以下几个方面帮助表达式的呈现:

• 它可以通过影响间距来改善显示。
• 它简化了计算机代数系统和音频渲染器等自动化系统对表达式的解释。

注意：本身并不为其分组内容添加可视围栏（如括号），必须使用元素显式地指定它们。

使用示例：

$\frac{1+2}{3}$ 

元素用于表示分数。它还可用于标记类似分数的对象，例如二项式系数和勒让德符号。

属性

身上除了全局MathML属性还有一个linethickness属性，表示要用于分数条的分数线粗细。如果指定，它必须有一个有效的长度/百分比值。如果该属性不存在或具有无效值，则使用FractionRuleThickness作为默认值。百分比是相对于默认值进行解释的。负值解释为0。

使用示例

$1+\frac{1}{2}-\genfrac{}{}{0ex}{}{1}{2}+\genfrac{}{}{200%}{}{1}{234}$ 

和

根式元素构造了一个表达式，该表达式的根符号为_√_，内容上方有一条线。

元素用于表示示平方根。

元素用于表示带下标的根号，例如立方根。

只接受一个参数：base；而接受两个参数：base index.

使用示例

$\sqrt{x}$



$\sqrt[3]{x}$ 

元素用于添加额外的填充，并设置所包含内容的位置和大小的一般调整。

属性

属性名	值	简介
depth	长度/百分比	表示元素的所需深度（低于基线）。
height	长度/百分比	表示元素的所需高度（高于基线）。
width	长度/百分比	表示元素的所需宽度（低于基线）。
lspace	长度/百分比	表示子内容的定位点相对于元素的定位点的水平位置。
voffset	长度/百分比	表示子内容的定位点相对于元素的定位点的垂直位置。

如果没有属性的话，它的行为就像一个。

使用示例

$1\frac{1}{2}+1\frac{23456}{78}9$ 

元素以不可见的方式呈现，但仍保留维度（如高度、宽度和基线位置）。其隐藏的方式使用了是CSSvisibility: hidden;。

使用示例

$x+\phantom{y+}z$ 

元素用于将内容显示为错误消息。此元素的目的是为从其他输入生成MathML的程序提供一种标准方法来报告语法错误。

默认情况下，呈现为用一个红框包裹住内容。

使用示例

$\text{Syntax error: frac{1}}$ 

元素用于更改其子元素的样式。从历史上看，元素几乎接受所有MathML属性，并用于覆盖其后代的默认属性值。

实际上等同于元素。但是，可能仍然与浏览器外部的MathML实现的兼容性相关。

使用示例

$\sum _I\prod _{i=1}^N$ 

token元素

通常，MathML公式中的每个文本都必须包含在此类容器元素（称为token元素）中。MathML提供了多个token元素，以区分文本内容的不同含义。

元素表示内容应呈现为标识符，例如函数名、变量或符号常量。还可以在其中使用任意文本来标记术语。

数学中的一种排版惯例是使用斜体字母表示变量。为了帮助解决这个问题，具有单个字符的 元素表示变量，可能会自动呈现为斜体；多个字符表示函数名，呈现为默认字体。如果需要还原此默认斜体转换，可以在元素身上使用全局MathML属性mathvariant="normal"取消单个字符的斜体呈现。

使用示例

$\sin$

$y$

$\mathrm{Y}$ 

元素表示一个数字字面值或应呈现为数字文本的其他数据。，通常是一个可能带有分隔符(点或逗号)的数字序列。它也允许在其中包含任意文本，实际上是一个数字数量。

使用示例

$0$


$\mathrm{0xFFEF}$


$\mathrm{twelve}$ 

元素表示广义上的运算符。表示一个操作符或任何应该呈现为操作符的东西。通常，数学运算符的符号约定相当复杂，因此MathML提供了一种相对复杂的机制来指定元素的呈现行为。

在MathML中，应该“作为运算符呈现”的事物列表包括许多不是一般意义上的数学运算符的符号。除了具有中缀、前缀或后缀形式的普通操作符外，这些操作符还包括围栏字符（如大括号、圆括号和“绝对值”条）；隔符（如逗号和分号）；数学上的重音（如符号上的横条或波浪号）。

属性

属性名	值	简介
accent	boolean	表示示在用作下标或上标（即绘制得更大、更靠近基本表达式）时，是否应将运算符视为重音符号。
fence	boolean	运算符是否为围栏（如括号）。此属性没有视觉效果。
largeop	boolean	指示当math-style设置为normal时是否应绘制更大的运算符.
lspace	长度/百分比	指示运算符前面的空间量。
rspace	长度/百分比	表示运算符后面的空间量。
maxsize	长度/百分比	表示操作符具有弹性时的最大尺寸。
minsize	长度/百分比	表示操作符具有弹性时的最小尺寸。
movablelimits	boolean	表示当math-style设置为compact时，附加的下标和上标是否移动到下标和上标位置。
separator	boolean	表示运算符是否为分隔符（如逗号）。此属性没有视觉效果。
stretchy	boolean	表示运算符是否拉伸到相邻元素的大小。
symmetric	boolean	表示弹性运算符是否应该围绕假想的数学轴（中心分数线）垂直对称。

• 对于lspace、maxsize、minsize和rspace属性，某些浏览器也可能接受传统的MathML长度。

使用示例

$\sum _5\sum _6$ 

元素用于呈现没有符号含义的任意文本，例如公式中的短单词或注释。

使用示例

$y=x^2\text{ if }x\ge 1\text{ and }2\text{ otherwise.}$ 

元素表示表达式中的字符串字面量，该表达式旨在由计算机代数系统或其他包含“编程语言”的系统解释。

在MathML3中，可以使用lquote和rquote属性分别指定作为开引号和闭引号的字符串。现在不再支持这些引号，必须将引号指定为元素文本的一部分。

使用示例

$s=''"hello\; world"''$ 

元素表示任意大小的空格，由其属性设置。注意：是一个空元素。

属性

| 属性名 | 值 | 简介 | | — | — | | depth | 表示空间的所需深度（低于基线）。 | | height | 表示空间的所需高度（高于基线）。 | | width | 表示所需的空间宽度。 |

width、height和depth(如果存在)必须有一个有效的长度/百分比的值。未指定的属性、百分比值或无效值将解释为0。如果计算出的值中有一个为负，则将其视为0。

使用示例

$1\frac{2}{3}$ 

脚本和限制元素

与

元素用于一次将任意数量的下标和上标附加到表达式，从而概括 元素。

在元素中使用，用于分隔后标与前标。在之前的元素，除了基本表达式外，其余的元素表示后标；反之在其之后的元素表示前标。

使用语法

如下，即一个基表达式，后面跟着任意数量的后下标-后上标对(按给定顺序附加)，中间使用分隔，后面可选地跟着任意数量的前下标-前上标对(按给定顺序附加)。此外，如果需要表示不存在的上标或下标可以用空的表示：

基本表达式后下标1 后上标1后下标2 后上标2后下标3 后上标4 ...后下标N 后上标N前下标1 前上标1 前下标2 前上标2 前下标3 前上标3 ... 前下标N 前上标N
 

使用示例

${}_6{}^{}{}_8{}^9\mathrm{X}_2^3{}_{}{}^5$ 

、和

元素用于在表达式下附加重音或限制。通常用于只需要下标的基本表达式。

元素用于在表达式上附加强调符号或限制。通常用于只需要上标的基本表达式。

元素用于在表达式下方和表达式上附加重音或限制。通常用于上下标都需要的基本表达式。

使用语法

和的使用语法是一致的：

 base underscript 或者 base underscript  

而的使用语法是：

 base underscript overscript  

与类似，base表示基本表达式；underscript表示下标；overscript表示上标。

属性

元素使用accentunder属性指定是否强调下标；元素使用accent属性指定是否强调上标；而同时具有accentunder和accent，作用是一致的（强调即绘制得更大、更靠近基本表达式）。

使用示例

$\underset{2}{1}+\stackrel{4}{3}+\underset{6}{\overset{7}{5}}+\underset{9}{\overset{10}{8}}+\underset{12}{\overset{13}{11}}$ 

, 和

元素用于将后下标附加到表达式。

元素用于将后上标附加到表达式。

用于将后上标和后下标附加到表达式。

使用语法

和的使用语法与上文的和一致；而的使用语法与一致。

使用示例

${\mathrm{x}}_2+{\mathrm{y}}^4+{\mathrm{z}}_6^7$ 

表格数学

、和

元素表示创建一个表格或矩阵。类似于HTML表格，但是只包含和

元素表示表或矩阵中的行。只能出现在元素中。

元素表示表或矩阵中的单元格。只能出现在元素中。

注意：、和身上都有许多属性，但是相当大一部分浏览器对这些属性的兼容性不太好，因此这里不过多说明。

使用示例

$$X=\begin{array}{cc}A& B\\ C& D\\ E& F\end{array}$$ 

语义注释

、和

元素将注释与MathML表达式关联起来，例如将其文本源作为轻量级标记语言或以特殊XML方言表示的数学含义。

语义元素是将注释与MathML表达式关联起来的容器元素。通常，元素的第一个子元素是要注释的MathML表达式，而随后的子元素表示注释元素中的文本注释，或元素中的更复杂的标记注释。

通常的结构为

• 第一个子项，它是要注释的 MathML 表达式。
• 随后或元素，后者保留用于XML格式，如OpenMath。

默认情况下，只呈现元素的第一个子元素，而其他元素的CSSdisplay属性设置为none。

和属性

和除了全局属性外，还支持一个encoding属性，表示注释中语义信息的编码。常见的有：MathML-Content、application/openmath+xml、image/png、MathML-Presentation…

使用示例

$\frac{1}{2}$ 

全局MathML属性表

属性名	简介
class	元素类的空格分隔列表。类允许CSS和JavaScript通过类选择器或函数选择和访问特定元素。
id	定义在整个文档中必须是唯一的唯一标识符。可在链接（使用片段标识符）、CSS和JavaScript中标识元素。
data-*	自定义数据属性
dir	指示MathML元素的方向性。允许的值有ltr和rtl。
displaystyle	设置元素数学样式的布尔值。
mathbackground	元素的背景色。
mathcolor	元素的字体颜色。
mathsize	元素的字体大小。
mathvariant	token元素的逻辑类。
nonce	一个加密随机数（使用一次的数字），内容安全策略可以使用它来确定是否允许继续给定的抓取。
scriptlevel	指定元素的数学深度。
style	包含要应用于元素的CSS样式声明。
tabindex	一个整数属性，指示元素是否可以接受输入焦点(是可聚焦的)，它是否应该参与顺序键盘导航，如果是，在什么位置。

scriptlevel全局属性用于设置MathML元素的数学深度。它允许覆盖来自用户代理样式表的规则，这些规则定义了MathML公式中字体大小的自动计算。在$$元素上，math-depth默认为0。

如果是无符号整数（即删除了前缀符号），则接受的值为：

• ：将math-depth设置为值。这会将元素的font-size设置为与指定深度的元素相同的值。
• +：将math-depth设置为值add()，这将把的元素的字体大小缩小倍。
• -：将math-depth设置为值add(<-U>)，这将把的元素的字体大小放大倍。

简单理解就是深度越深，字体大小越小。

使用示例：

${\text{BASE}}_{\text{SUBSCRIPT}}^{\text{SUPERSCRIPT}}$ 

回退

有些浏览器并不支持MathML，因此建议为不支持MathML的浏览器提供回退机制。如果文档中只需要包含简单的数学公式，那么在文档中导入mathml.css样式表就可以了：

如果包含复杂的数学公式，可以考虑MathJax库做polyfill，但相应的库的大小会比mathml.css大：

或者，也可以在页面顶部为没有良好MathML支持的浏览器显示警告，并让用户在上面的后退选项中进行选择：

使用示例

实现一个复杂的公式： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JteF0Ok1-1680071352686)(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAJElEQVRoge3BMQEAAADCoPVP7WkJoAAAAAAAAAAAAAAAAAAAbjh8AAFte11jAAAAAElFTkSuQmCC)]

工具库

看了上面的示例，写一个公式要77行代码，看着好多啊，但通常情况下MathML内容不是手动编写的。

公式可以直接在网页中编写，通过JavaScript库负责执行它们到MathML的转换。这可能是最简单的选择，但它也有一些问题：必须加载和执行额外的JavaScript代码，必须转义保留字符，Web爬虫无法访问MathML输出…

可以使用自定义元素托管源代码，并确保通过阴影子树插入和呈现相应的MathML输出。例如，使用TeXZilla的元素:

One over square root of two (inline style):\frac{1}{\sqrt{2}}
One over square root of two (display style):\frac{1}{\sqrt{2}}
 

也可以使用其他输入法，例如ASCIIMath或jqMath语法。但都需要确保加载了库并使用正确的分隔符：

<
One over square root of two (inline style, ASCIIMath): `1/(sqrt 2)`
One over square root of two (inline style, jqMath): $1/√2$
One over square root of two (display style, jqMath): $$1/√2$$
 

还可以使用命令行程序，而不是在页面加载时生成MathML表达式。这将导致包含静态MathML内容的页面加载速度更快。如下html文档并不包含任何工具库，通过命令行使用Node.js和TeXZilla执行：

...
MathML in HTML5
One over square root of two (inline style):$\frac{1}{\sqrt{2}}$
One over square root of two (display style):$$\frac{1}{\sqrt{2}}$$
 

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

转换后生成如下文件output.html：

...
MathML in HTML5
One over square root of two (inline style):$\frac{1}{\sqrt{2}}$
One over square root of two (display style):$$\frac{1}{\sqrt{2}}$$
 

同样的也有更复杂的工具库进行转换，这里就不过多说明了。

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

54.jpeg#pic_center" style=“margin: auto” />
有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：

文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取