×

MathML学习应用:编写 MathML

作者:Web前端之家2021.01.29来源:Web前端之家浏览:1954评论: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取决于用于读取这些文档的工具。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/html20210129a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Web前端之家

    可以的,有什么问题吗?...

  • 访客

    我就试试的...

  • a235

    不能比啊,老外赚钱就是多!...

  • Web前端之家

    备份是必须的,避免麻烦!...

  • a235

    总结得不错,正好用到,提前备份还是最靠谱啊!...

  • Web前端之家

    谢谢支持,请持续关注Web前端之家!...

  • 访客

    文章很棒,做即时通讯也可以试试【GoEasy】这个框架,官网文档详细还提供了各种demo,大大降低了...

  • Web前端之家

    是的,等其他人验证没问题再装吧,总会有第一个吃螃蟹的人,哈哈!!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.1