摘要：针对目前网上数学公式不能被查询和重用的弊端，提出了一种基于MathML的网络数学公式编辑器MathEdit的实现方案。MathEdit采用标准的JavaScript和DOM实现，使得数学公式能够以不同于传统交流的方法在Web上处理和传输。MathEdit适用于任何支持MathML的浏览器，具有极大的灵活性和可扩展性。
关键词：MathML；数学公式；Web；JavaScript；DOM
中图分类号:TP391文献标识码:A

Implementation of MathML-Based Web Mathematical

Expressions Editor

Abstract：To make up for shortage of traditional approach for resolving mathematical expressions on web,a
MathML-based mathematical expressions editor named MathEdit is presented.MathEdit is a totally Web-based
environment for mathematical expressions processing and transmiting,which is implemented in standard
JavaScript and DOM,and makes use of browser support for MathML display.The architecture,implementation,
flexibility and extensibility of MathEdit are discussed in this paper.
Key words：MathML;mathematical expressions;Web;JavaScript;DOM

1引言
        随着计算机技术和Internet的普及，Web已经成为人们发布、获取和管理信息最重要的途径，它的迅速发展极大地促进了各学科领域内人们之间的交流和协作。在数学教育与学术交流中，常常需要编辑大量的数学符号和公式，但是目前Web技术对数学公式的输入和显示的支持非常有限。数学公式的表示和传输已经成为制约互联网上数学信息交流和远程数学教育发展的瓶颈。
        过去在Web中显示数学公式大多采用图像方式。用户先借助Microsoft Equation、MathType等公式编辑器生成目标表达式，再将表达式保存为图像文件嵌入到Web中的适当位置。这种图像方式解决了数学公式在网上的显示，但缺乏灵活性和扩展性，因为包含在图像中的数学信息不能被查询和重用。
       本文提出了一个利用MathML(MathematicalMarkup Language)作为描述语言，在Web浏览器中建立数学公式，自动获得MathML代码，解析MathML文档，并显示复杂数学公式的编辑器MathEdit。它的优点在于能够实现高效的公式建立、网络传输和公式再现，且与操作系统和浏览器无关，仅要求浏览器支持MathML和JavaScript
2数学标记语言MathML
       Web技术和XML的快速发展推动了数学信息的表示、存储以及传输方式。国际互联网标准组织W3C制定的MathML是一种基于XML的数学标记语言，是计算机之间交换数学信息的基本标准。它完全采用XML的定义规范，继承了XML的大部分优点，具有强大的数学公式表达能力。
        MathML用于描述数学公式的结构和内容，它的出现使数学公式不仅可以在Web上建立与传输，而且可以在其它应用程序中实现再利用和转换，满足用户对数学公式的各种处理需求。MathML提供两种描述数学公式的标记：Presentation标记和Content标记。这两种标记都可以完整地描述任何一个数学公式，但是它们的侧重点不同：前者用来描述数学表达式的二维布局结构，它更注重表达式的显示方式；后者描述用于计算和处理的数学信息，它更关注表达式的内在含义。数学表达式的Content标记编码形式可能对应多种Presentation标记编码形式，表达式在Web浏览器中的具体显示形式由MathML处理程序决定。Presentation标记和Content标记使得Web中的数学信息不仅是机器能读的，而且是机器能理解的。二者可交叉使用形成混合编码，但不能相互替代。
        2001年2月，W3C公布了MathML 2.0标准，扩展了MathML 1.0的符号集，改进了MathML与一些W3C技术的集成。MathML 2.0还包含MathML DOM(MathML文档对象模型)，可以识别MathML组件并能用任何脚本语言进行操作。
       MathML的发布使得网上数学公式编辑器的开发越来越受到业内人士的关注，目前广泛使用的有美国Design Scienc的WebEQ和IBM的Integre MathMLEquation Editor――Zed。在使用这类编辑器时，客户端不仅需要安装公式编辑器本身，而且还需要安装MathPlayer、Techexplorer等特定的数学解析插件来支持MathML的显示。此外，WebEQ利用JavaApplet技术实现公式显示的方式使得浏览器在显示公式时会首先装载JavaApplet，这样在一定程度上影响了页面的显示速度。近些年来，诸如Amaya、Mozilla、Netscape7.0等浏览器都陆续实现了对MathML的内部支持。MathEdit采用标准的JavaScript和DOM实现，支持Presentation标记和Content标记，客户端不需要进行任何安装操作就能够在浏览器中使用，通过API还可以方便地集成在BBS论坛或聊天室等网络交互场所中。
3 MathEdit体系结构
3.1 MathEdit用户界面
        MathEdit是一个基于MathML的交互式数学公式编辑器，它提供了一个可视化的GUI，内置许多常用的数学符号和公式模板，用户无需了解MathML的任何语法就可以在网络上以“所见即所得”的方式在线编辑各种数学公式，相应的MathML代码由系统内部模块自动生成。编辑完成的数学公式以MathML文档的形式保存，可以方便地包含在Web页面中表示和传输数学信息。MathEdit的用户界面如图1所示。MathEdit界面友好，操作简单。它支持两种输入方式：键盘输入和鼠标输入。对于普通字母、数字和符号，用户可以采用键盘输入的方式顺序输入内容；而对于其他内容通常采用鼠标输入的方式，通过鼠标直接点击图形化的公式模板按钮来选择某个特殊的数学表达式，如分式、根式等(如图2所示)。公式模板中包含一些临时输入框，用户可以鼠标单击选择一个临时输入框作为当前插入点进行下一步编辑。MathEdit公式模板依据MathML标准对符号、公式和字母进行分类，每一类模板工具栏均采用常用符号、公式和字母进行标示，清晰明确，实用性强。

图1 MathEdit的用户界面

3.2 MathEdit的功能及特点
编辑和处理数学公式。MathEdit用户可以在支持MathML的Web浏览器中创建和编辑一个新的数学公式。

提供三种编辑模式：Design模式、MathML模式和Preview模式。用户可以在Design模式下通过可视化的公式模板输入数学公式；熟悉MathML的高级用户可以在MathML模式下直接对描述数学公式的MathML代码进行编辑，从而更快捷地得到公式；Preview模式允许用户在新窗口中预览当前编辑的公式。用户也可以将MathML模式和Design模式结合起来建立符合要求的数学公式。

输入的数学公式以MathML文档的形式保存在本地或服务器上，解决了以往图像文件存储数学信息的弊端。

实现数学公式的二次编辑。MathEdit允许用户打开一个保存在本地或服务器上的MathML文档，显示数学公式并可以在Design模式和MathML模式下进行修改，通过内部模块改变DOM树实现数学公式的重用。

设置数学公式的格式。MathEdit支持MathML2.0提出的四个格式属性：mathvariant、mathsize、mathcolor和mathbackground，实现对数学公式的大小、字体、文本颜色和背景颜色等格式的控制。
支持公式模板定制化(详见第4部分)。MathEdit提供数学公式模板定制化工具，用以满足不同用户群体的特殊需求。
3.3 MathEdit的体系结构
        MathEdit包括公式编辑器和公式模板定制化工具两部分，其体系结构如图3所示。公式编辑器借助JavaScript和DOM对用户行为进行响应，以完成公式的编辑、显示以及公式模板的定制，它与用户的交互是一个双向的过程。用户行为包括鼠标左键单击公式模板和工具栏、鼠标左键单击选择当前的有效插入点，键盘输入字符和数字。用户行为激活命令处理模块的JavaScript功能函数，相应的功能函数将修改内部DOM树或在原有DOM树中增加一个DOM树片段来完成公式的编辑。MathEdit使用Mozilla XML DOM解析器解析MathML文档，处理MathML输入。公式模板定制化工具允许用户对数学符号定制文件进行读写操作以完成公式模板的定制并动态显示定制结果。

4公式模板定制化的实现方案
       MathEdit拥有广泛的潜在用户群。在数学信息的网上交流过程中，教师、学生、研究人员都可能会利用MathEdit来轻松实现复杂公式的编辑和传输。不同身份、不同专业的用户在不同时期需要的公式模板不尽相同，为满足不同用户群体甚至单个用户的应用需求，MathEdit提供了公式模板定制化工具。特别是在数学教学中，教师需要对本节课所需的数学符号进行定制，学生可以直接使用相应的定制结果――特定的MathEdit公式模板，这样不仅使公式模板具有针对性，突出课堂教学的内容，而且可以减少查找所需公式模板的操作，进而降低编辑数学公式的工作量。下图显示了高中年级部分数学符号的定制结果。

图4 MathEdit高中年级部分数学符号定制结果

       MathEdit公式模板定制化工具提供三种定制化途径：用户可以按年级、符号种类和单个符号选择定制公式模板，定制信息存储在服务器端的数学符号定制文件(XML文件)中。所有数学符号和公式模板的信息都记录在服务器端的公式模板文件(XML文件)中，它描述了数学符号的标识信息和显示该符号的事件，而在定制文件中也只是记录了该符号的标识信息。

图5显示了公式模板定制化的流程，终端用户可以在数学符号定制文件列表中选择某一定制文件，MathEdit在网页加载时解析定制文件，并将相应的定制结果动态加载到网页中。在MathEdit公式模板定制化的实现过程中，使用XMLHttpRequest对象发送请求或处理对象，而不是以提交表单数据的形式向服务器发送信息。XMLHttpRequest采用异步模式，打破了页面重载的传统模式，浏览器不必等待用户请求操作，也不需要挂起并等待服务器的响应，更不必更新整个窗口就可以显示新获取的数据。定制化结构图如图6所示。

5公式导航的实现方案
        可视化的光标导航是软件的重要组成部分，在MathEdit中，为了创建一个数学公式，用户要在适当的位置插入公式模板，并在模板的临时输入框中填充字母、数字、符号以及另一个模板，由此产生任何复杂的数学公式。MathEdit采用鼠标左键单击选择当前的有效插入点实现公式导航。在Mozilla系列的浏览器中，鼠标单击公式编辑区域选择某一插入点时，用户看不到任何光标，如图7(a)所示，从而影响下一步操作。为了符合操作习惯，插入点位置由一个类似“光标”的垂直竖线标示，如图7(b)所示。

“光标”是在通过鼠标左键单击获得焦点的节点后增加一个
<mi mathcolor="#00ff00"id="cursor">|</mi>
节点完成的。部分实现代码如下：
var domfrag=designDoc.createDocumentFragment();
var tag=designDoc.createElementNS(mmlns,"mi");
tag.setAttribute("id","cursor");
tag.setAttribute("mathcolor","#00ff00");
var tnode=designDoc.createTextNode("|");
tag.appendChild(tnode);
domfrag.appendChild(tag);
        MathEdit中许多公式模板涉及到数学公式的布局，如分式、根式、求和运算符、上标、下标等，光标并不能导航到这些模板的右端，如分式模板，光标只能导航到分母或分子，如图7(c)、(d)所示,从而影响复杂公式的编辑。MathML提供<mphantom>标记，其作用是使子表达式不可见，但保留其大小。MathEdit在布局公式的右端增加

<mphantom>
<mi id="placeholder">|</mi>
</mphantom>
       节点作为隐藏占位符，使得光标能够导航到公式模板右端。图7(e)显示了应用隐藏占位符后光标的导航位
置。
6结束语
       基于MathML的网络数学公式编辑器MathEdit解决了Web上数学公式难以被查询和重用的问题，具有很强的现实意义。为适应和推动网上数学信息交流的发展，MathEdit将增加更多的公式模板，逐步完善数学公式布局，增加MathML和其它数学公式编码形式的转换，保证不同版本编辑器之间的兼容性。
参考文献
[1]W3C Math Working Group.MathML.http://www.w3.org/Math/,2006
[2]David Flanagan,张铭泽译.JavaScript权威指南第三版.北京:中国电力出版社,2001
[3]Design Science.WebEQ Documentation.http://www.dessci.com/en/products/webeq,2006
[4]IBM.Integre MathML Equation Editor Documentation.http://www.integretechpub.com/techexplorer/,2005
[5]W3C Math Working Group.Document Object Model.http://www.w3.org/DOM/,2005
[6]Ryan Asleson,Nathaniel T.Schutta,金灵等译.Ajax基础教程.北京:人民邮电出版社,2006
[7]Wei Su,Paul.Wang,Lian Li等.MathEdit:A Browser-basedVisual Mathematics Expression Editor.Hong Kong:The 11thAnnual Conference of the Asian Technology Conference in Mathematics(ATCM),2006:271
[8]Guanyu Li,Lian Li,Wei Su等.Design and Implementation of MAML.Hong Kong:The 11th Annual Conference of the Asian Technology Conference in Mathematics(ATCM),2006:168
[9]李军国,张立昂.基于XML的网上数学表达式显示技术.北京大学学报(自然科学版),2003,39(5):675
[10]Samuel S.Dooley.Editing Mathematical Content and Presentation Markup in Interactive Mathematical Documents.Lille,France:ISSAC,2002:55