[转]Web数学公式的输入和显示

 

  Web数学公式的输入和显示
 
 

摘要:随着基础教育信息化的推进,许多中小学开始利用网络开展教学与交流,但Web数学公式的输入和显示一直是一个难题。本文介绍了几种Web数学公式的显示方法及其原理,给出了普通网页、博客、Moodle系统中输入和显示数学公式的几种实现方法。
关键词:数学公式 TeX MathML ASCIIMathML

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

1、面向桌面的TeX系统

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

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

在TeX系统中,各种数学符号和公式由不同的数学记号来表示,如/sin表示sin、/sqrt表示根号等。数学记号和数字的组合一般放在/[.../]里面,或$...$之间。下表中列出了几个数学公式及其TeX指令:(本文采用$...$标记形式)

数学公式   TeX指令

$/frac{3+x}{5}$

$f(x)=x^2-1$

$/sqrt[3]{x^4-3x+1}$

$/sum/limits_{i= 1}^/infty x_i$
图表1 TeX标记的数学公式

一般来说,TeX指令和它所表示的数学公式本身非常接近,或者是该数学符号的英文缩写。因此TeX指令比较直观、易学,也很方便输入,中小学数学涉及的数学符号更是如此。

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

TeX系统虽然能完美地显示数学公式,但是无法在互联网上使用。而HTML超文本标记语言由于自身的缺陷,也很难显示数学公式。针对这些问题,国际互联网协会(World Wide Web Consortium,W3C)于1997年成立了W3C数学工作组,制定一种基于XML语言标准的数学标记语言(Mathematical Markup Language,MathML)。该组织于1998年发布了MathML 1.0版本,当前最新版本是2.0SE。

MathML语言主要从表现(Presentation)和内容(Content)两个维度来定义各种数学符号和公式。表现标记是从数学表达式的显示形式来描述数学公式,如<msup>标记表示上标符号,<msub>表示下标符号等;而内容标记是从数学表达式本身的内在含义进行描述数学公式,如<plus/>标记表示相加。二者可以从各自的角度表示同一个数学公式,以公式 为例,表现标记和内容标记分别如下:

表现标记         内容标记
  
图表2 MathML标记的数学公式

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

3、ASCIIMathML转换方法

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

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

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

ASCIIMathML和ASCIIMath Image Fallback转换程序的原理如下图所示:

图表3 ASCIIMathML解析数学公式的原理

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

随着基础教育信息化的推进,越来越多的中小学开始利用网络来开展教学和交流,如校园网站、BBS、博客、Moodle教学平台、学科资源库等。如何在网页上输入和显示数学公式,成了束缚数学学科开展网络教学的一个难题。

下面我们采用ASCIIMathML转换方法,通过修改源代码,使中小学常见的Web系统支持输入和显示数学公式。(考虑到国内IE用户占绝大多数,本文采用ASCIIMath Image Fallback转换程序,IE客户端无需安装MathPlayer插件即可显示数学公式。如果采用其它转换程序,请修改为相应的js程序文件名。)

1、普通网页

对于普通网页,无论是静态的还是动态的,只要在网页<head>和</head>之间增加一句代码,就可以显示数学公式。具体方法是先将ASCIIMathMLwFallback.js复制到网站的根目录下,然后在网页任意位置书写TeX指令描述的数学公式即可,如下:

修改源代码:

<head>…
< src="/blog/"/ASCIIMathMLwFallback.js"" type=""text/java""></>
</head>…

在需要显示数学公式的位置放置TeX语言标记的数学公式,如$f(x)=x^2-1$
2、oBlog博客系统

oBlog是一个开源的多用户博客系统,许多中小学利用这个平台开展教学和师生交流。oBlog博客系统本身不支持数学公式的输入和显示,下面我们修改oBlog系统源代码,使它支持数学公式的输入和显示,具体方法如下:(在oBlog 4.0 Access免费版中测试通过)

将ASCIIMathMLwFallback.js文件复制到oBlog网站根目录,修改oBlog文件夹下面的/inc/class_blog.asp程序第1247行:
修改源代码:
…"</head>" …
修改为:
…"< src="/blog/"/ASCIIMathMLwFallback.js"" type=""text/java""></></head>"…
修改之后,所有oBlog博客用户都可以在自己的博客中输入和显示TeX指令描述的数学公式,如下图:

图表4 oBlog博客中显示数学公式

3、Moodle教学平台

Moodle课程管理系统(CMS)是一个优秀的开源教学平台,在黎加厚教授、郭绍青教授等研究者的大力推广下,国内已经有不少学校开始采用Moodle平台开展网络教学。让Moodle支持数学公式,有两种方法:

(1) ASCIIMath2TeX过滤器法。具体方法为:下载ASCIIMath2TeX Moodle filter,并上传到Moodle网站filter文件夹;以管理员身份登陆Moodle平台,在管理 ? 设置 ? 过滤器中设置asciimath2tex为活跃的。需要注意的是,采用这种方法时,TeX指令描述的数学公式应该放在##…##之间,而不是前面所述的$…$之间,例如## f(x)=x^2-1 ##。

(2) ASCIIMath Image Fallback转换法。Moodle是一个开源系统,因此我们也可以通过修改源代码,使其支持数学公式的输入和显示。具体方法如下:(在Apache 2.2.0、MySQL 5.0.20、 PHP 5.1.2、Moodle 1.5.4环境下测试通过)

将ASCIIMathMLwFallback.js文件复制到当前主题风格文件夹下(如formal_white),修改该文件夹中的header.html文件,在第9行“</head>”语句之前增加一行PHP代码:
修改源代码:

< type="text/java" src="<?php echo "$CFG->wwwroot/theme/$CFG->theme" ?>/ASCIIMathMLwFallback.js"></>
修改之后,所有Moodle页面均可以显示TeX指令描述的数学公式,如下图:

图表5 Moodle教学平台中显示数学公式

参考文献:
1. ASCIIMathML[EB/OL]. http://www1.chapman.edu/~jipsen/mathml/asciimath.html
2. ASCIIMath Image Fallback[EB/OL].
http://www.pierce.ctc.edu/dlippman/asciimathtex/AMT.html
3. 王庆,梁嘉. 数学标记语言MathML[J]. 现代教育技术,2004(1)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/58189.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 显示数学公式

在你的项目build.gradle文件中添加maven { url “https://jitpack.io” }&#xff0c;注意不是app目录下的build.gradle文件 allprojects {repositories {...maven { url "https://jitpack.io" }} }同时 在你app的build.gradle文件中添加compile ‘com.github.daque…

程序员的收入:我靠卖源码都能月入上w

这是本文的目录 前言一、源码是什么?二、卖源码赚不赚钱&#xff1f;三、如何卖源码赚钱&#xff1f;第一类&#xff1a;源码搬运1、在淘宝或互站等平台贩卖2、自建网站销售 第二类&#xff1a;二次开发类写在最后文末福利零基础Python学习资料介绍&#x1f449;Python学习路线…

基于语音AR的智能眼镜总结(Smart Glasses via Audio)

基于语音AR的智能眼镜总结(Smart Glasses via Audio) 视觉增强眼镜 骨传导眼镜 骨传导技术点 定向扬声器眼镜 声学结构和示意图

关注智能眼镜:tooz Devkit 20

原文 http://i.scwy.net/ai/2020/121922-aieye/&#xff1a; 从某个角度说&#xff0c;智能眼镜是一个趋势。它可以取代智能手机及众多电子设备的屏幕&#xff0c;通过智能的交互设计&#xff0c;从来抛弃现有电子设备的物理交互方式。 今天看到一款智能眼镜 tooz Devkit 20&…

IOS微信逆向-免越狱抢红包防撤回等自定义功能实现

微信砸壳 CrackerXI砸壳&#xff0c;或手动使用dumpdecrypted砸壳 把已砸壳的wech使用scp或者助手at.ipa导出 monkeydev MonkeyDev集成在xcode上面&#xff0c;可以快速开发hook的代码&#xff0c;链接到Mach-O文件&#xff0c;支持修改ipa后的免越狱安装。 新建MonkeyDev项目…

简单几步教你爬取IOS手机端APP数据

作为一名“数据狗”和“码字狗”&#xff0c;手机端APP的数据爬取应该是一项基础技能。其实随着手机的广泛使用&#xff0c;不管是谁&#xff0c;懂点爬取的知识都不吃亏&#xff0c;毕竟“技多不压身”嘛。今天分享的爬取工具与步骤非常简单&#xff0c;数据小白也能很快上手。…

使用fiddler实现苹果ios手机抓包

Fiddler是一个强大的抓包工具&#xff0c;可以通过它抓取、查看和调试PC端、手机终端和远程服务器之间的http/https等通信。 Fiddler没有手机客户端&#xff0c;都是安装在PC上&#xff0c;要实现对手机上的程序抓包&#xff0c;则需要对PC上的Fiddler和手机端做一些配置。 此…

使用fiddler实现苹果ios手机抓包--的补充

网上有很多的配置步骤&#xff0c;我就不赘述&#xff0c;这里引用别人的一篇 https://blog.csdn.net/weixin_40608713/article/details/114873070 我这里要补充的是&#xff0c;如果按照常规设置依旧抓不了包&#xff0c;不妨尝试以下方法&#xff1a; 1、打开Fiddler官网链接…

最高年薪近56万!这些专业赢麻了!

来源&#xff1a;新智元 不用赘述&#xff0c;大家都知道&#xff0c;最近半年ChatGPT是有多么火爆。 随着ChatGPT的全球爆火&#xff0c;AIGC也已成功从科技领域破圈&#xff0c;成为跨越所有圈层的全民话题。 AIGC对图文、视频创作的颠覆&#xff0c;对相关行业已经产生了深远…

ChatGPT加强人机交互,共创智能社会|小智AI

ChatGPT丨小智ai丨chatgpt丨人工智能丨OpenAI丨聊天机器人丨AI语音助手丨GPT-3.5丨OpenAI ChatGPT|GPT-4|GPT-3|人机对话|ChatGPT应用|小智ai|小智ai|小智ai|小智ai|小智AI|chatgpt小智AI 自从ChatGPT的诞生以来&#xff0c;它作为一种先进的人工智能语言模型&#xff0c;在为…

【GPT4】微软 GPT-4 测试报告(8)局限性与社会影响

欢迎关注【youcans的AGI学习笔记】原创作品&#xff0c;火热更新中 微软 GPT-4 测试报告&#xff08;1&#xff09;总体介绍 微软 GPT-4 测试报告&#xff08;2&#xff09;多模态与跨学科能力 微软 GPT-4 测试报告&#xff08;3&#xff09;编程能力 微软 GPT-4 测试报告&…

【软件架构思想系列】模块化与抽象

前言 软件架构的本质:软件体系结构是软件系统的基本组织,包括组件的组成、它们之间的关系以及它们之间的交互。 Software architecture is the fundamental organization of a software system, including the composition of its components, the relationships between the…

拿到一套游戏服务端源码,该从哪看起?

开发游戏服务端&#xff0c;经常要接触一套全新的游戏代码。接触新代码贯穿于整个工作生涯&#xff0c;比如&#xff0c;作为刚入职的新人&#xff0c;要去熟悉项目代码&#xff0c;尽快上手工作&#xff1b;调到一个新的项目组工作时&#xff0c;要熟悉已有代码&#xff1b;给…

网页服务器怎么才能挤进去,逆水寒挤不进去服务器是正常操作 那挤进去的玩家都是什么感受?...

原标题&#xff1a;逆水寒挤不进去服务器是正常操作 那挤进去的玩家都是什么感受&#xff1f; 逆水寒开测第一天便形成了近年少见的挤服务器的热度&#xff0c;多少年过去了&#xff0c;鲜有端游能达到这样的挤服务器盛景&#xff0c;关于如何挤进去的技巧我们今天就不提了&…

分享24个网页游戏源代码,总有一个是你想要的

分享24个网页游戏源代码 24个游戏源代码下载链接&#xff1a;https://pan.baidu.com/s/1gYJlj8enJbh5mFS_wMaZBA?pwd4ncb 提取码&#xff1a;4ncb 下面是项目的名字&#xff0c;我放了一些图片&#xff0c;大家下载后可以看到。 Html5JS网页版捕鱼达人游戏 HTML5水果忍者游戏…

JavaScript练手小技巧:我破解了原神官网全屏滚动的秘密

这个标题有点夺人眼球&#xff0c;哈啊哈~骗点击率的。 “原神”官网当真的做的很漂亮&#xff0c;虽然我没玩过这个游戏&#xff0c;但是禁不住喜欢这个网站啊。 https://ys.mihoyo.com/ 最近居家教学上网课。除了上课&#xff0c;实在不想做学校安排的其它任务&#xff0c…

热血江湖2023年官服查线器源码

热血江湖官服查线器源码&#xff0c;方法就是向服务器发送封包&#xff0c;获取返回的服务器大区和线路数据。 等线太难了&#xff0c;主要是想做一个自动查线自动登录游戏的工具&#xff0c;能力有限&#xff0c;先分享查线的源码&#xff01; 有同样想法的同学可以拿着做有参…

在线答题助手c语言源码,很早之前发的逆水寒答题助手,开源!!自己可以修改成任何答题器源码!~~...

本帖最后由 chenbo1991 于 2020-4-16 11:03 编辑 这个是很早之前玩逆水寒为了科举弄出来的!!~~自己修改几处api就行!~~自己抓包修改就可以了.! QQ截图20200416105826.jpg (56.77 KB, 下载次数: 2) 2020-4-16 10:58 上传 .版本 2 .支持库 iext .判断开始 (组合框1.现行选中项 &a…

我是怎么抓取逆水寒大宋佳人漂亮的小姐姐的呢?70行代码解决问题

一年一度的大宋佳人活动又开始了&#xff0c;小姐姐们又开始了踊跃的报名&#xff0c;都有哪些漂亮的小姐姐呢&#xff1f;不放我们来爬一下看看 注&#xff1a;本文仅用于python爬虫学习&#xff0c;请勿滥用数据&#xff0c;严禁侵犯个人隐私 基础分析 大宋佳人活动主页面…

html制作《逆水寒》心得及部分代码

制作网页的心得和部分代码 布局 原图 首先&#xff0c;我们要明确网页的布局&#xff0c;以此来判断需要几个盒子&#xff0c;放在什么样的位置。从原网页中不难看出&#xff0c;我们可以把这张图分为这几个部分&#xff1a; 大的布局上&#xff0c;我们分为三个盒子。1号大…