mathml 怎么在网页中显示

html-css08

mathml 怎么在网页中显示,第1张

MathML 2.0扩展了MathML 1.0的符号和表达式集,改进了与其它一些W3C技术的集成。MathML 2.0支持Tex和MathML的互操作,MathML 2.0还能处理用ISO 12083格式编码的文档。MathML可以用作专用数学方程编辑器,它含有一个特殊数学符号的大字符名称集,而且将支持方程的朗读。数学方程可以用层叠样式表(CSS)来设计,可以通过XLink同任何数学表达式链接,MathML元素可以包含于带命名空间的XHTML文档。MathML 2.0还包含MathML DOM(MathML文档对象模型),可以识别MathML组件并能用任何脚本语言操作它。

目前数学公式在网页上显示的方法主要有三种:图片显示,数学标记语言(MathML),和文档排版系统(LaTeX)。下面就简单介绍一下这几种公式显示方式。

一、图片显示

图片显示分为两种方式:第一种是静态图片显示,这种方式最简单直接,就是用Word等软件的公式编辑器,编辑公式好以后,将软件生成的图片嵌入到网页中,用标签进行显示:

(图一)嵌入静态图片显示公式

这种方法有很多的缺点:

如果网站公式比较多,服务器就需要维护大量公式图片;

图片体积一般都比较大,会影响网页加载效率,占用较多的带宽;

公式不能重用,如果公式发生变化,需要重新编辑图片;

图片放大后会变得比较模糊。

第二种方式就是动态生成图片,首先需要将数学公式转换为表示公式的TeX语言,用程序将TeX语言生成与公式对应的图片,这种方法解决了直接使用静态图片不能重用的问题,但是这种方法比较复杂,需要后台代码来实现,也可以使用网上开放的API,如Google Charts,如果使用SVG格式图片,公式在放大后也不会影响清晰度。

二、数学标记语言(MathML)

MathML(Mathematical Markup Language)是W3C制定的为了使数学公式在网络上、计算机代数等软件、打印排版、语音合成上使用和重用的语言规范。MathML严格遵守XML规范,因此已经运用XML的软件可以轻易地解析MathML,比如,Open Office和Microsoft Office都支持MathML格式的公式解析。MathML也很容易嵌入到HTML文档中,从而在浏览器上显示数学公式,Firefox原生支持MathML;Internet Explorer可通过MathPlayer插件显示MathML文档;Chrome从版本24之后,暂时取消了对MathML文档的支持。Chrome和其它一些不支持MathML的浏览器,仍可以通过适当的HTML+CSS代码将MathML显示出来。下面是二次函数求根公式的MathML代码:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN"

"http://www.w3.org/Math/DTD/mathml2/mathml2.dtd">

<math xmlns="http://www.w3.org/1998/Math/MathML">

       <mi>x</mi>

       <mo>=</mo>

       <mfrac>

               <mrow>

                       <mrow>

                               <mo>-</mo>

                               <mi>b</mi>

                       </mrow>

                       <mo>±</mo>

                       <msqrt>

                               <msup>

                                       <mi>b</mi>

                                       <mn>2</mn>

                               </msup>

                               <mo>-</mo>

                               <mrow>

                                       <mn>4</mn>

                                       <mo>⁢</mo>

                                       <mi>a</mi>

                                       <mo>⁢</mo>

                                       <mi>c</mi>

                               </mrow>

                       </msqrt>

               </mrow>

               <mrow>

                       <mn>2</mn>

                       <mo>⁢</mo>

                       <mi>a</mi>

               </mrow>

       </mfrac>

</math>

 

(代码一)二次函数求根公式的MathML代码

下图是上述代码在Firefox中呈现的效果:

(图二)MathML在Firefox中显示的效果

MathML的标准过于复杂,虽然用计算机很容易对其进行解析,但是不利于人工编写公式,人工编写MathML公式一般需要借助专用的代码生成工具完成,如Amaya等。

三、文档排版系统(LaTeX)

LaTeX是一个优质的文档排版系统,它被设计用于生成技术性和学术性文档,LaTeX已经成为科技文档在传输和发行中事实上的标准。用LaTeX编辑公式非常容易,即使用户没有排版和程序设计的知识也可以充分发挥由LaTeX所提供的强大功能。例如,二次求根公式用LaTeX语言可以写成:

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

(代码二)二次函数求根公式的LaTeX代码

相对于之前的二次函数求根公式的MathML代码(代码一)简短了许多。但是LaTeX代码不能够直接被浏览器所解析,因此,任何浏览器都需要利用插件(如,Mathjax)将LaTeX代码转换为HTML+CSS代码进行显示。

(图三)利用Mathjax插件显示二次函数求根公式

LaTeX还可用于信件、书籍等各种文档的排版,因而具有更好的兼容性。

用LaTeX编辑数学公式比较简单,有很好的重用性,在印刷业中也被广泛使用;其次,各浏览器对MathML标准的支持并不够完善,同样需要通过插件来获得跨浏览器的支持。因此,综合上述各方案的特点,利用插件在网页上显示LaTeX语言公式是目前最适用于Web的数学公式显示方案。

CSS hack 用来让网页兼容各种浏览器(在各种环境下都能“正确的”显示)

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.

所以*+html.img_cpzs,.img_cpzs ul{---样式代码---}

只在IE7下面有效