渲染数学公式,大致两个要点,渲染和排版。
排版
目前大部分的排版方式都是基于TEX或者Latex(基于TEX)。之所以使用Latex,是因为它完全使用文本描述排版,对于复杂的数学公式、表格、化学分子式等完全不在话下,甚至可以排五线谱、棋谱、电路图等。
而数学公式只是Latex的一个子集。
渲染
从数学公式到眼睛所看到的界面,这一过程,最重要的就是GUI渲染。像word、WPS等Native应用,是用系统提供的API,直接将公式输出到屏幕。而非Native应用,是用宿主提供的能力,将公式翻译成宿主可识别语言,从而将公式输出到屏幕。第三种则是将公式转换成已存在的图形规范,诸如PNG,SVG等格式,从而将公式输出到屏幕。
第二种和第三种在某种程度上是统一的。本文只讲述第二、三种。
HTML
HTML作为标记语言,其宿主是浏览器。把公式翻译成HTML语言,由浏览器负责渲染到屏幕。
技术实现
Katex
Katex 可以将latex公式语法转换成html,其格式、字体比较优美,转换速度快。
用法:
var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}", {
throwOnError: false
});
// '<span class="katex">...</span>'
MathJax
MathJax 是一个开源的 JavaScript 显示引擎,适用于 LaTeX、MathML 和 AsciiMath 表示法,适用于所有现代浏览器。
配置:
window.MathJax = {
loader: {load: ["input/tex", "output/chtml"]}
};
MathML
MathML 是一个用于描述数学公式、符号的一种 XML (en-US) 标记语言,浏览器可以直接识别并渲染。但是这一特性并未在所有的浏览器中得到支持,仅仅firfox和safari支持,chrome的任何版本都不支持MathML。
直接编写MathML是相当困难的,通常我们会选择其他方式转换。
TeXZilla: 基于 Javascript 的 LaTeX to MathML 转换器。
LaTeXML:将 LaTeX 文档转换为 HTML+MathML 网页
MathJax 可以将输出格式设置为MathML。
Katex 可以将输出格式设置为MathML。
在渲染html公式时,框架一般提供了对应的css包,只有引入了这些包,你才能正常显示公式。
图片
可以将数学公式转换为图片,即可在任何设备上展示。具有优秀的跨平台特性,但是和文字的排版相对困难。
MathJax
MathJax 可以将公式转换为SVG格式的图片。
后端服务
可以使用一些特殊的后端服务解析latex公式,生成预览图片。
- codecogs是一个latex公式渲染服务,它根据get请求返回一个svg图片。
- jlatexmath:java版latex公式渲染服务
使用例子:TeXFormula formula = new TeXFormula(latex); TeXIcon icon = formula.createTeXIcon(TeXConstants.STYLE_DISPLAY, 20); BufferedImage image = new BufferedImage(icon.getIconWidth(), icon.getIconHeight(), BufferedImage.TYPE_BYTE_GRAY);
这里就不一一列举了,你甚至可以使用latex包,自己搭建一套服务。
在web端使用时,只需要在img标签的src上附加上带有公式文本的get请求链接,即可显示公式。
Canvas
我不认为用web canvas 渲染公式是一个好的方式,包括腾讯文档都没使用(尽管主体功能是用canvas实现的),但还是需要介绍一下这种方式。
canvas-latex 可以将latex公式转换到canvas画布上。
当然,html和图片也是可以被渲染到canvas画布上,但是我认为这让排版变得极其困难。
键入(公式编辑器)
能直接编写latex语法的人很少,为了方便使用,我们需要一个可以可视化输入的编辑器。
想想一下用户的使用过程,我们就可以知道,公式编辑器必然包含了公式的渲染,或采用图片,或采用html。
-
JMEditor 是基于CKEditor、jQuery、MathQuill等组件开发的,轻量级、开放源代码、所见即所得、无任何插件的在线公式编辑器。
-
kityformula-editor 是基于 SVG 的公式编辑器,百度前端富应用小组开发。
公式编辑器大多是一个弹出框,最后输出公式。所以这些编辑器可以被集成到各个富文本编辑器中去,只需要你理解对应富文本编辑器的插件机制即可。像kityformula-editor,就可以被集成到富文本tinyMCE中。
富文本编辑器中的公式
单独使用公式编辑器的场景比较少,大部分我们还是将它集成到富文本编辑器中。当我们存储富文本时,会存储其html文本。公式或存储成html、或图片。当我们在富文本编辑器中编辑的时候,如果公式被存储成图片,光标系统可很好的左右移动;但是如果被存储为html,没有经过精心设计的光标系统,会出先左右移动出现不可预料的情况。
tinyMCE是将公式显示成图;腾讯文档存储成了html,但是其光标系统经过精心设计,可以左右移动,跨过公式。
我曾经尝试过将kityformula-editor集成到wangEditor中,并输出html公式。光标在公式的html中迷失方向,无法跳出。如果你不在乎这个缺陷,也可以使用html公式。