在网页中显示数学公式

夏日阳光
176
文章
22
评论
2019年5月22日23:57:30 评论 372 3250字阅读10分50秒

在一些理科性质的网站上, 往往会涉及数学公式的输入和显示,在Word中,我们可以利用 MathType 公式编辑器很容易地去编写数学公式,然而,这在 Web 中却一直是一个难题。随着互联网的普及,使用 Web 技术,我们可以非常方便地将内容推广。今天,我们就来总结一下 Web 中展现数学公式的一些可行技术。

在网页中显示数学公式

一.计算机表现数学公式的几种方法

1.面向桌面的TeX系统

TeX是Knuth教授开发的一种优秀的桌面电子排版系统。它提供了一套功能强大并且十分灵活的排版语言,有多达900多条指令,并且具有宏功能,用户可以不断地定义自己适用的新命令来扩展TeX系统的功能。

TeX系统有许多优点,如开源、易移植、排版质量高、输出结果与设备无关等。同时,它也是公认的最好的数学公式排版系统,它在数学和工程领域得到了广泛的使用,相关领域的学术论文基本都由TeX系统或其兼容系统(如LaTeX系统)排版生成。

在TeX系统中,各种数学符号和公式由不同的数学记号来表示,如\sin表示sin、\sqrt表示根号等。

2.面向互联网的数学标记语言MathML

TeX系统虽然能完美地显示数学公式,但是无法在互联网上使用。目前我采用的方法是将Word中的公式进行截图,在网页中用图像的方式显示公式,用这种方法比较费时,而且修改也不方便。而HTML超文本标记语言由于自身的缺陷,也很难显示数学公式。

针对这些问题,国际互联网协会(World Wide Web Consortium,W3C)于1997年成立了W3C数学工作组,制定一种基于XML语言标准的数学标记语言(Mathematical Markup Language,MathML)。该组织于1998年发布了MathML 1.0版本,当前最新版本是3.0,发布于2010年10月21日。 MathML语言主要从表现(Presentation)和内容(Content)两个维度来定义各种数学符号和公式。表现标记是从数学表达式的显示形式来描述数学公式,如<msup>标记表示上标符号,<msub>表示下标符号等;而内容标记是从数学表达式本身的内在含义进行描述数学公式,如<plus>标记表示相加。二者可以从各自的角度表示同一个数学公式。

MathML数学标记语言是一个国际标准,Mozilla/Firefox/Netscape(7.1+)浏览器已默认支持MathML语言,但Internet Explorer暂不支持MathML标准,需要安装MathPlayer插件来解析含有MathML标记的网页。

3.ASCIIMathML转换方法

简单地说,TeX指令和MathML标记语言是两种互补性很强的语言。采用TeX指令描述的数学公式简单、直观,但浏览器不能直接识别和显示;MathML数学标记语言虽然是为互联网而设计的,但它的标记语言又相对复杂,不便于输入。因此,有研究者结合两者的优点,开发了TeX指令与MathML自动转换的Java 程序,ASCIIMathML就是其中的佼佼者。

ASCIIMathML转换程序由美国加州查普曼(Chapman)大学Peter Jipsen开发,其设计思想是在网页上插入一段JS代码,将网页中的TeX指令(TeX/LaTeX-style)自动转换成MathML表现标记语言,再返回给支持MathML标准的网络浏览器识别和显示。

由于微软Internet Explorer浏览器不支持MathML标准,若要正确地显示数学公式,IE客户端还需要安装MathPlayer插件,这增加了用户的不便。因此,皮尔斯学院David Lippman在ASCIIMathML转换方法基础上,开发了ASCIIMath Image Fallback转换程序,该转换程序自动判断客户端浏览器是否支持MathML,若支持,则返回MathML表现标记;若不支持,则返回该公式的GIF图像(远程调用互联网上的cgi程序生成图像)。另外,作者也提供了ASCIIMathTeXImg转换,直接由TeX指令生成GIF图像,而无论用户使用的浏览器是否支持MathML。

二、在Web系统中输入数学公式

1.Latex

LaTeX 基于 TeX,主要目的是为了方便排版,是当今世界上最流行和使用最为广泛的TeX格式。使用LaTeX基本上不需要使用者自己设计命令和宏等,因为LaTeX已经替你做好了。因此,即使使用者并不是很了解TeX,也可以在短短的时间内生成高质量的文档。对于生成复杂的数学公式,LaTeX表现的更为出色。在学术界的论文,尤其是数学、计算机等学科论文都是由 LaTeX 编写, 因为用它写数学公式非常方便。

Latex 实例:

显示结果为:

在网页中显示数学公式

2.MathML

MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。目前在 Netscape7.1/Mozilla/Firefox 下可以直接观看。

MathML 实例:

FireFox 下显示结果为:

在网页中显示数学公式

3.ASCIIMathML

ASCIIMathML.js是一种将ASCII符号翻译成直观的MathML(HTML版本)的开源JavaScript脚本。您只要遵循简单的语法,用普通的ASCII字母和符号,就可以在网页上输入并显示出漂亮的数学公式。这些公式遵循W3C标准,同样,目前在 Netscape7.1/Mozilla/Firefox 下可以直接观看。公式的开头和结尾必须以 $ 或 ` 为标记,语法跟 LaTex 语法很像似,二者彼此兼容。

ASCIIMathML 实例:

FireFox 下显示结果为:

在网页中显示数学公式

三、在Web系统中显示数学公式的方式

1.MathJax

MathJax是一个显示网络上数学公式的开源JavaScript引擎库,支持LaTeX,MathML和AsciiMath标记语言,允许你在网页中包含公式,无论是使用LaTeX、MathML或者AsciiMath符号,这些公式都会被JavaScript处理为HTML+CSS、SVG或者MathML符号。支持服务器端渲染,渲染过程是一个异步执行的队列。其优点是对数学公式的渲染支持度很高,缺点是生成公式的速度较慢。

2.MathML

MathML 是由国际互联网协会(W3C)于1997制定的一种基于XML(标准通用标记语言的子集)标准的数学标记语言,其优点是渲染速度快,可以像书写Html那样书写数学公式,缺点是对浏览器的兼容差,目前只有FireFox和部分webkit内核的浏览器(Safari、Opera)兼容MathML,Chrome和IE不兼容MathML,另外,用MathML语法书写过于繁琐冗长,这也许是它难以被推广的原因吧。

3.KaTex

KaTeX 是一个易于使用,号称“最快”的数学公式渲染库,是后起之秀,可汗学院的公式渲染方案。支持服务端渲染,例如服务器端使用Node.js程序调用KATEX,把渲染好的HTML片段直接发送给客户端。KaTeX支持所有主流的浏览器,其优点是并发渲染,渲染速度快。KaTex 由于发展比较晚,大约 2013 年,对 LaTex 语法的支持程度可能不如 MathJax,比如不支持中文。

四、使用示例

1. MathJax

MathJax调用非常方便,只需要在需要展示数学公式的页面加载 MathJax 的 js 即可,代码如下:

引入上述js就可以自动渲染数学公式。

2. Katex

使用官方自带的 CDN 的配置。

上面,该defer属性 表示在页面加载之前不需要执行脚本,从而加快了页面呈现速度,通过onload属性调用 renderMathInElement 一次自动渲染脚本内容。

weinxin
关于本站
本站是一个分享建站经验、网站优化以及互联网技巧的个人博客。
  • 版权声明: 发表于 2019年5月22日23:57:30
  • 转载注明:https://www.pieruo.com/8825.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: