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相同的语法来表示元素和属性树。
<math>
<math>
元素是顶级MathML元素,用于编写单个数学公式。每个数学公式都由一个元素<math>
表示。该元素可以直接放置在HTML页面中。
属性
MathML元素有自己的全局属性 – 全局MathML属性。除了全局MathML属性外,<math>
还含有一个display
属性,指定应如何呈现包含的MathML标记。其允许的值为block
和inline
其中之一,其含义如下:
block
,表示此元素将显示在当前文本范围之外的自己的块中,并且math-style
设置为normal
。inline
,表示此元素将显示在当前文本范围内,并将math-style
设置为compact
。
该属性默认值为inline
。
总体布局
<mrow>
<mrow>
元素用于对子表达式进行分组。这些子表达式通常包含一个或多个运算符及其各自的操作数(例如<mi>
和<mn>
)。此元素呈现为包含其参数的水平行。
在编写MathML表达式时,应将<mrow>
中的元素按照表达式的数学解释中的分组方式进行分组。正确的分组可以在以下几个方面帮助表达式的呈现:
- 它可以通过影响间距来改善显示。
- 它简化了计算机代数系统和音频渲染器等自动化系统对表达式的解释。
注意:
<mrow>
本身并不为其分组内容添加可视围栏(如括号),必须使用<mo>
元素显式地指定它们。
使用示例:
<!-- 1 + 2表示:——————3
-->
<math><mfrac><mrow><mn>1</mn><mo>+</mo><mn>2</mn></mrow><mn>3</mn></mfrac>
</math>
<mfac>
<mfrac>
元素用于表示分数。它还可用于标记类似分数的对象,例如二项式系数和勒让德符号。
属性
<mfac>
身上除了全局MathML属性还有一个linethickness
属性,表示要用于分数条的分数线粗细。如果指定,它必须有一个有效的长度/百分比值。如果该属性不存在或具有无效值,则使用FractionRuleThickness
作为默认值。百分比是相对于默认值进行解释的。负值解释为0
。
使用示例
<math><mn>1</mn><mo>+</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mo>−</mo><!-- 分数线的厚度为0 --><mfrac linethickness="0"><mn>1</mn><mn>2</mn></mfrac><mo>+</mo><mfrac linethickness="200%"><mn>1</mn><mn>234</mn></mfrac>
</math>
<msqrt>
和<mroot>
根式元素构造了一个表达式,该表达式的根符号为_√_,内容上方有一条线。
<msqrt>
元素用于表示示平方根。
<mroot>
元素用于表示带下标的根号,例如立方根。
<msqrt>
只接受一个参数:<msqrt>base</msqrt>
;而接受<mroot>
两个参数:<mroot>base index</mroot>
.
使用示例
<!-- <msqrt> -->
<!-- 表示√x -->
<math><msqrt><mi>x</mi></msqrt>
</math>
<!-- <mroot> -->
<!-- 表示3√x -->
<math><mroot><mi>x</mi><mn>3</mn></msqrt>
</math>
<mpadded>
<mpadded>
元素用于添加额外的填充,并设置所包含内容的位置和大小的一般调整。
属性
属性名 | 值 | 简介 |
---|---|---|
depth | 长度/百分比 | 表示<mpadded> 元素的所需深度(低于基线)。 |
height | 长度/百分比 | 表示<mpadded> 元素的所需高度(高于基线)。 |
width | 长度/百分比 | 表示<mpadded> 元素的所需宽度(低于基线)。 |
lspace | 长度/百分比 | 表示子内容的定位点相对于<mpadded> 元素的定位点的水平位置。 |
voffset | 长度/百分比 | 表示子内容的定位点相对于<mpadded> 元素的定位点的垂直位置。 |
如果<mpadded>
没有属性的话,它的行为就像一个<mrow>
。
使用示例
<!-- 调整分数周围的间距 -->
<math><mrow><mn>1</mn><mpadded style="background: lightblue;"><mfrac><mn>1</mn><mn>2</mn></mfrac></mpadded></mrow><mo>+</mo><mrow><mn>1</mn><mpadded lspace="2em"voffset="-1em" height="1em" depth="3em"width="7em"style="background: lightblue;"><mfrac><mn>23456</mn><mn>78</mn></mfrac></mpadded><mn>9</mn></mrow>
</math>
<mphantom>
<mphantom>
元素以不可见的方式呈现,但仍保留维度(如高度、宽度和基线位置)。其隐藏的方式使用了是CSSvisibility: hidden;
。
使用示例
<math><mrow><mi>x</mi><mo>+</mo><!-- “y&#