JavaScript / 前端 · 8月 27, 2021 0

计算机中数学公式的渲染

渲染数学公式,大致两个要点,渲染和排版。

排版

目前大部分的排版方式都是基于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公式,生成预览图片。

  1. codecogs是一个latex公式渲染服务,它根据get请求返回一个svg图片。
  2. 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。

  1. JMEditor 是基于CKEditor、jQuery、MathQuill等组件开发的,轻量级、开放源代码、所见即所得、无任何插件的在线公式编辑器。

  2. kityformula-editor 是基于 SVG 的公式编辑器,百度前端富应用小组开发。

公式编辑器大多是一个弹出框,最后输出公式。所以这些编辑器可以被集成到各个富文本编辑器中去,只需要你理解对应富文本编辑器的插件机制即可。像kityformula-editor,就可以被集成到富文本tinyMCE中。

富文本编辑器中的公式

单独使用公式编辑器的场景比较少,大部分我们还是将它集成到富文本编辑器中。当我们存储富文本时,会存储其html文本。公式或存储成html、或图片。当我们在富文本编辑器中编辑的时候,如果公式被存储成图片,光标系统可很好的左右移动;但是如果被存储为html,没有经过精心设计的光标系统,会出先左右移动出现不可预料的情况。

tinyMCE是将公式显示成图;腾讯文档存储成了html,但是其光标系统经过精心设计,可以左右移动,跨过公式。

我曾经尝试过将kityformula-editor集成到wangEditor中,并输出html公式。光标在公式的html中迷失方向,无法跳出。如果你不在乎这个缺陷,也可以使用html公式。

冀ICP备19028007号