11/19/2016 8:42:22 PM 浏览器眼里的数学公式
Date: 2016-11-19
Title: 浏览器眼里的数学公式
Intro: 如何在 Web 应用程序中提供数学公式的展示和编辑体验，MathJax 和 MathQuill 哪个库更适合开发者使用。
Tags: 前端
谁需要在浏览器里读/处理公式？
随想了一番，这么几类用户有这种需求：
- 网上读（写）论文，做研究的老师、学生们。 这个貌似不需要解释，哪篇理工科论文里没有几个数学公式撑场面，它们一般都是作为研究内容的数学理论基础。
- 电子化程度好的教育/教学系统
- 其他。是的，为了严谨，凑数的第三条。
所以，主要还是数学相关的教育教学研究工作者对网页公式的读写有比较强的需求。
如何在浏览器中展示公式
当然你我都能想到的，最简单的办法：用户在桌面软件上编辑完公式，转成图片放到网站上。简单易行，缺点也很明显，不能编辑。
事实上，HTML5 标准已经对数学公式的表示和展现有了规定，这套标准就是 MathML 标准（https://www.w3.org/Math/whatIsMathML.html)，但是悲剧的是，好些个号称各种尊重 HTML5 的浏览器厂商们并没有实现对 MathML 的支持。为此 MathJax 研发公司的管理者 Peter 还在自己的博客上吐槽了一番（https://www.peterkrautzberger.org/0186/），大意就是 MathML 语言本身作为 XML 的应用，发展的非常成功；但是它作为 HTML5 的数学公式标准，表现地非常非常失败，浏览器厂商不给力，怎么说都不去做支持。我凑巧有看到 User Voice 上给 Edge 提的关于 MathML 支持的反馈有两三千个“赞”，后来又看了看有关 Edge 的热门反馈列表，我靠，实在是太多了，两三千个“赞”真算不上啥，连前十都进不了（https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6508572-mathml)。
简单做了下对比，发现 IE 、 Edge、Chrome 貌似都没有支持， FireFox 支持的不错。所以，情况就比较尴尬了，有标准，大家又都不执行，所以等同于无标准，就意味着只能再想别的办法了。哎？凑巧就有俩机构（或者是公司，貌似是还有一些美国教育官方机构做支持）做了两套 JavaScript 的库，非常出众，我查了好多做数学公式展示和编辑的网站，大家都不约而同、十分机智地从这两款库里 2 选 1 （或2 选 2）。
MathJax
MathJax， 历史十分悠久，十多年的辛勤耕耘，执着的付出，可以支持 LaTex/MathML/AsciiMath 等数学公式语言，兼容所有主流的浏览器（而且，不管浏览器是否对 MathML 有没有支持）。MathJax 可以将公式展示成为 HTML+CSS、SVG 、MathML等。也就是说，我们可以利用它将一个 用 LaTex、MathML、AsciiMath 表示的公式转换成一张图片，这是 MathJax 与 MathQuill 相比的优势之一。
我的理解是，如果浏览器本身不支持 MathML，那它就把公式用 HTML+CSS 或者 SVG 的方式画出来；如果浏览器对 MathML 支持的很好，那就直接利用浏览器去展示。还有个有趣的事情是，如果用户给它的输入是个 LaTex，MathJax 检测到当前浏览支持 MathML 标准，会机智地将它转换成 MathML，然后将其余工作交给浏览器（这样在性能上会比用 HTML 显示公式更快）。MathJax 将所有的这些逻辑隐藏在自己的实现里，开发者直接调它的 API 就好了。（真是个 Web 数学公式界的 JQuery！）
利用 MathJax 的 API，我们可以拿到这个公式的 MathML/LaTex 表示，意味着，如果你给了 MathJax 一个 LaTex 数学公式作为输入，那么你也可以利用 API 拿到这个公式的 MathML 表示。
给 MathJax 的公式，不管是 LaTex 还是 MathML，MathJax 都会把公式转换成自己内部的格式（貌似叫 Jax？），然后在展示公式或者公式 API 被调用的时候，再把内部格式转成 HTML，或是 MathML， 或是 SVG 等等。
另外，MathJax 允许开发者定制鼠标右键菜单。对于 MathJax 展示的公式，用户可以在公式上右键调出功能菜单。这个菜单是可以由开发者定制哒。
MathJax 对 MathML 3.0 的支持还是比较给力的，详情可参考 http://www.w3.org/Math/testsuite/results/tests.html。
但是，它更多的是帮开发者在页面上展示一个公式，没有提供很好的交互性编辑器的体验，可以参考 MathQuill 官网上的例子来理解我刚才提到的交互性公式编辑器体验。
最后提一句，MathJax 的文档十分给力，你想问的问题，还有不想问的问题，都在里面！！ 而且，它会很清楚的把一些局限解释的很清楚，因为，它不想为浏览器，JavaScript，和操作系统们背黑锅！！！
MathQuill
这哥们，也是十分专注，相比 MathJax，它更加注重公式在网页中的编辑体验，我们可以十分方便的把它的交互式的原地公式编辑器集成在自己的网页应用程序里。
MathQuill 的劣势是，它只支持 LaTex 作为输入，而且没有提供 API 将公式转成图片。所以 MathQuill 的库会比 MathJax 更轻量级。
MathQuiil 对 LaTex 的支持也有一些限制，但是由于 MathQuill 文档比较简单，没有详细交代，只能慢慢体会。目前为止，貌似并不支持矩阵。具体问题可以参照 MathQuill 在 Github 上的 Issue Lists。
总结
可以参考上述提到的优劣势，决定用哪个库，当然也可以都用。比如在编辑时用 MathQuill，在需要转图片或者支持更多数学公式（如矩阵）时用 MathJax。
当然，也可以都不用。:) Enjoy your starting from scratch, putting it on GitHub!!
