jerytang

2017-12-03 20:24

LaTex数理化公式展示方案简介

本文作者:IMWeb jerytang 原文出处:IMWeb社区 未经同意,禁止转载

LaTex 是什么

LaTex 是基于 Tex 的排版系统,常用于科技出版物的排版。和 word 等排版工具的最大区别在于,它是纯文本格式的,掌握基本的规则,就能输出专业美观的展示效果。纯文本格式,也就意味着它不像 word 那样,所见即所得,对初学者不友好。

LaTex 环境配置

Tex 作为一个比较古老的排版工具,在 linux、windows 和 mac 上都有发行版。比较常用的是 TeXliveCTex套装MiKTeX。不过安装过程挺痛苦的,完整版有 3G 以上。TexLive 安装过程参见 官方文档

还有一些周边的配套工具比如 ghostscript、imagemagick,来进行文件格式的转换,比如,LaTex 默认是输出 pdf 文件的,但是要在web上显示公式,一般都用 png 或者 gif 格式。

LaTex 语法展示

安装好 LaTex 编译环境后,就可以使用 LaTex 命令编译文档了。

LaTex 命令

新建一个文档 hello.tex

\documentclass{article}
\begin{document}
Vieta's formulas $\frac{-b \pm \sqrt{b^2-4ac}}{2a}$
\end{document}

Tex 的语法是一种标记语言(Markup Language),就像 HTML 一样,但是语法看起来有点怪异。

第 1 行代码是说,这个文档的类型(documentclass) 是文章 article。还有其它的文档类型,比如书籍(book)、幻灯片(beamer)、作业题(exam)。

然后,第 2 行,文档的正文开始。

第 3 行,首先是纯文本,英文的韦达公式,接着是一个 $ 开始,表示嵌入一个数学公式,$ 公式结束。和 word 不同,这里的公式是用纯文本表示的。

最后,文档结束。这就是一个简单的 LaTex 文挡。下面将其转为 pdf 文档。科技文档一般都是 pdf 格式的。

执行编译命令:

pdflatex cmd

得到一个 pdf 文档:

latex_pdf_output

这个 pdf 的展示效果如下:

pdf output

LaTex 中的数学公式

LaTex 的数学公式用美元符号包裹起来。

公式语法举例:

基本符号

公式和普通文本混排

特殊符号、加粗

将 pdf 转为 png 用于 web 展示

pdf 是矢量格式的,在web上,一般通过图片的方式展示。需要借助上面所说的工具 imagemagick,转为 web 图片格式。

imagemagick_convert_pdf_to_png

LaTex 的 web 替代品及其存在问题

一方面,LaTex 用于科技排版,展示非常美观,另一方面,LaTex 的编辑环境,对于熟悉了 word 这种所见即所得的工具,一般人不容易掌握。

web 上的公式展示,主要是用图片,曾经 FireFox 浏览器支持 MathML,可是 Chrome 一直没有支持。

同时,也涌现了一些基于 HTML(svg)+CSS LaTex 渲染实现。但是,这些方案只实现了 Latex 非常少的一部分功能——公式渲染。

MathJax

MathJax 出现于 2011 年,发展至今已经有 6、7 个年头了。其特点是对数学公式的渲染支持度很高。

对开发者来讲,其缺点是 js API 有点奇怪,渲染比较慢,好在支持服务器端渲染。

MathJax 首先有个配置文件:

MathJax.Hub.Config({
  extensions: ["tex2jax.js"],
  jax: ["input/TeX", "output/SVG"],
  tex2jax: {
    inlineMath: [
      ['$', '$'],
      ["\\(", "\\)"],
    ],
    displayMath: [
      ['$$', '$$'],
      ["\\[", "\\]"]
    ],
    processEscapes: true
  },
  "SVG": {
    availableFonts: ["TeX"]
  }
});

然后将调用渲染API,转为美观的LaTex效果,如下。由于渲染很慢,所以渲染过程是一个异步执行的队列。

MathJax.Hub.Queue(['Typeset', MathJax.Hub]);

mathjax_typeset

KaTex

相对于 MathJax, KaTex 是后起之秀,是可汗学院的公式渲染方案。API 设计,对前端工程师更加友好。KaTex 的特点是渲染很快,见下图的对比,左边是 KaTex,右边是 MathJax。

KaTex 的 API 是一个同步调用。

katex.render("c = \\pm\\sqrt{a^2 + b^2}", element);

KaTex is faster than mathjax

KaTex 由于发展比较晚,大约 2013 年,对 LaTex 语法的支持程度可能不如 MathJax,比如不支持中文。

katex_cjk

KaTex 也支持服务器端渲染。

var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}");
//=> <span class="katex">...</span>

MathQuill

跟 MathJax、KaTex 不同,MathQuill 是一个真正意义上的公式编辑器,一边输入一边渲染,输出可以是 Tex,但是对于复杂的公式,这种输入方式还是有很大的局限性,输入过程还是需要记住一些 LaTex 命令。

mathquill

小结

使用 MathJax、KaTex 方案的共同问题是用 HTML、CSS 来渲染公式,非常冗长,如果采用了服务器端渲染,很容易超出数据库字段的长度限制,比如,我们就遇到过超出 MySQL Text 类型的 64k 长度限制。

一个简单的公式,就会产生很多 HTML 结构。

verbose output

所以,使用传统的 LaTex 引擎,将 Tex 代码转为 pdf,再转为 png,不失为一种简单可行的方案。后续文章将会展开实施这套传统的后台渲染公式方案。

1条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。