MathML学习应用：编写 MathML

作者：Terry2021.01.29来源：Web前端之家浏览：6288评论:0

关键词：MathML

这个页面解释了如何利用MathML语言书写数学公式。就像HTML，MathML是用标签和属性描述的。当你的文档包含了高级结构样式说列表或表格的时候，HTML会变得很冗长，但是幸好还有很多来自简单记号法的生成器，“所见即所得”编辑器以及别的内容管理系统可以帮助您编写Web网页。

结果是，好的MathML编辑工具很重要，我们在下面描述一些工具。值得一说的是，Mozilla，数学公式记号法在结构方面更加复杂，像分数，平方根或者矩阵，很可能需要它们自己的标签。 MathML工作小组已经开发出了TeXZilla，这是一个基于JavaScript，支持Unicode编码的LaTeX转MathML转换器的应用程序，打算在此处描述的许多情况下使用。当然了，这个列表并不详尽，我们建议你自己去查看W3C MathML软件列表，你可以在那里找到很多别的工具。

注意，根据设计，MathML在HTML5中是完美整合的，而且你可以使用寻常的Web功能，例如说CSS，DOM，JavaScript或SVG。这超过这个文档的范围了，但是任何拥有基础Web语言知识的人都能够轻松地学会用MathML综合这些功能。请阅读我们的文档以及MathML参考以了解详情。

使用MathML

HTML网页中的MathML

您可以在HTML5文档内部使用MathML表达式：

<!DOCTYPE html><html><head>
 <title>MathML in HTML5</title></head><body>

  <h1>MathML in HTML5</h1>

  <p>
    Square root of two:    <math>
      <msqrt>
        <mn>2</mn>
      </msqrt>
    </math>
  </p></body></html>

浏览器不支持转换MathML的内容。建议在发布网页之前，把你的MathML内容标记转换成MathML表达式，称为说利用ctop.xsl样式表作为辅助。下面提到的工具可以生成MathML表达式。

对不支持MathML的浏览器的后备计划

不幸的是，一些浏览器无法呈现MathML方程式，或者只能有限地支持它。因此，你可能需要使用一个MathML polyfill以提供一些有关呈现的后备计划。如果你只需要基本的数学公式结构，某种说用在这个MDN wiki中的这些，那么，一个小型的mathml.css样式表就足够了。要想使用它，只需要在你的文档中插入一行内容：

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

如果你需要更多复杂的结构，你需要考虑使用更重一些的MathJax库作为一个MathML polyfill：

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

注意有两个脚本执行功能检测到mspace元素和mpadded元素。还有一些类似的脚本，对于不支持MathML的浏览器，会在网页顶部显示一个警告，让用户选择一个后备计划：

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

如果你不想使用指向Github的链接，但是想在你的项目中整合这些铺垫，或者别的东西，你需要探测脚本以核实MathML支持的程度。举个例子，下面的函数通过检测mspace元素，核实了是否支持MathML（你可以用mpadded替换mspace）。

 function hasMathMLSupport() {
  var div = document.createElement("div"), box;
  div.innerHTML = "<math><mspace height='23px' width='77px'/></math>";
  document.body.appendChild(div);
  box = div.firstChild.firstChild.getBoundingClientRect();
  document.body.removeChild(div);
  return Math.abs(box.height - 23) <= 1  && Math.abs(box.width - 77) <= 1;}

作为替代选，下面的用户代理字符串嗅探将允许检测带原始MathML支持的渲染引擎（Geocko和WebKit）。注意，UA嗅觉不是最可靠的方法，而且可能会在版本之间被破坏（从一个版本到另一个版本）：

var ua = navigator.userAgent;var isGecko = ua.indexOf("Gecko") > -1 && ua.indexOf("KHTML") === -1 && ua.indexOf('Trident') === -1;var isWebKit = ua.indexOf('AppleWebKit') > -1 && ua.indexOf('Chrome') === -1;

数学公式字体

为了获得良好的布局或允许使用不同的样式，拥有可用的数学字体很重要。提供指向MDN的字体说明的链接总是很好的，以便您的访问者可以验证他们的系统上是否安装了合适的字体。向后提供Web字体也很好。

在Gecko 31.0（Firefox 31.0 / Thunderbird 31.0 / SeaMonkey 2.28）之前，设置数学字体有点繁琐，请参阅Mozilla 2.0的字体说明。对于Gecko 31.0（Firefox 31.0 / Thunderbird 31.0 / SeaMonkey 2.28），这要简单得多，并且与任何支持MathML的Web渲染引擎兼容。例如，这是一个最小的样式表，用于将Latin Modern用于文本，并将Latin Modern Math用于数学：

@namespace url('http://www.w3.org/1999/xhtml');@namespace m url('http://www.w3.org/1998/Math/MathML');body, m|mtext {
    font-family: Latin Modern;}m|math {
    font-family: Latin Modern Math;}

然后，您可以照常使用@font-face规则为Latin Modern和Latin Modern Math提供WOFF回退。

XML文档中的MathML（XHTML，EPUB，等等）

如果出于某种原因需要在XML文档中使用MathML，请确保满足通常的要求：格式正确的文档，使用正确的MIME类型，"http://www.w3.org/1998/Math/MathML"在<math>根目录上使用MathML命名空间。例如，上一个示例的XHTML版本如下所示：

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
  "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
 <title>XHTML+MathML Example</title></head><body><h1>XHTML+MathML Example</h1>

  <p>
    Square root of two:    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <msqrt>
        <mn>2</mn>
      </msqrt>
    </math>
  </p></body></html>

请注意，如果您将MathML用作独立的.mml或.svg文档，或者在EPUB书中使用，则可能不总是可能将MathJax用作不具有MathML支持的渲染引擎的polyfill。因此，是否可以处理MathML取决于用于读取这些文档的工具。

赏您的支持是我们创作的动力！