Android插入方程技术方案分析

上一回《iOS Pages插入方程功能分析》中，我们分析了iOS Pages插入方程的用户交互过程。

这一回开始，开始分析Android如何实现插入方程的功能。

一、目标

分析Android插入方程的技术实现方案，为『神马笔记』插入方程功能扫除技术障碍。

二、技术问题

编写数学公式常用的2种语言是LaTeX和MathML，从手机端编辑的角度来看，LaTeX优于MathML，MathML作为XML的子集，需要编写大量的标签元素，不太适合手机编辑。

因此，选择LaTeX来实现插入数学公式。

• 使用LaTeX需要解决的技术问题

问题	描述
解析	通过解析LaTeX公式，从而判断是否有效，是否为空。
渲染	渲染解析后的LaTeX。

• 使用MathML需要解决的技术问题

问题	描述
解析	通过解析MathML，从而判断有效性。
转换	将MathML转换为LaTeX，从而进行渲染。

三、实现方案

1. 解析LaTeX

方案	描述	参考资料
JMathTeX	LaTeX的Java解析渲染库，并对MathML提供了有限支持。	http://jmathtex.sourceforge.net/
jlatexmath	A Java API to render LaTeX	https://github.com/opencollab/jlatexmath
jlatexmath-android	aJLaTeXMath Library - Displays LaTeX commands in android OS.	https://github.com/mksmbrtsh/jlatexmath-android
JLaTexMath-andriod	JLaTexMath for Android 完美支持、数学、物理、化学公式、汉字解析、图文混排 本项目借鉴自jlatexmath-android（由java Api 转化来的Android版本） 本项目针对化学、生物类的中文公式做了优化。	https://github.com/sixgodIT/JLaTexMath-andriod
jlatexmath-android	This is a fork of jlatextmath project that brings rendering of LaTeX math to Android.	https://github.com/noties/jlatexmath-android

2. 渲染LaTeX

除了解析LaTeX代码库自带的渲染功能外，还可以通过网页方式渲染LaTeX。

方案	描述	参考资料
MathJax	Beautiful math in all browsers A JavaScript display engine for mathematics that works in all browsers.	https://www.mathjax.org/
KaTeX	Fast math typesetting for the web.	https://katex.org/ https://github.com/KaTeX/KaTeX

3. 解析MathML

MathML是XML的子集，因此所有解析XML的代码库都可以用于解析MathML。

方案	描述	参考资料
PULL	PULL解析器小巧轻便，解析速度快，简单易用，非常适合在Android移动设备中使用，Android系统内部在解析各种XML时也是用PULL解析器，Android官方推荐开发者们使用Pull解析技术。	https://www.cnblogs.com/guolingyun/p/6148462.html
SAX	Simple API XML。 一种基于事件的解析器，事件驱动的流式解析方式是，从文件的开始顺序解析到文档的结束，不可暂停或倒退。	https://www.jianshu.com/p/4e6eeec47b27
DOM	Document Object Model。 DOM，即对象文档模型，它是将整个XML文档载入内存(所以效率较低，不推荐使用)，每一个节点当做一个对象，结合代码分析。	https://blog.csdn.net/d_shadow/article/details/55253586

4. 转换MathML

我们通过LaTeX工具库完成了公式渲染，因此只需要将MathML转换为LaTeX，即可渲染MathML。

方案	描述	参考资料
xsltml	XSLT MathML Library	http://xsltml.sourceforge.net/ https://www.jianshu.com/p/b4caef5bf1ab
mml2tex	Converts MathML to LaTeX	https://github.com/transpect/mml2tex
mathml	Processing MathML with Java	https://github.com/moisko/mathml
mathml-converter	MathML2Text	https://github.com/imanneee/mathml-converter

四、实现过程

序号	过程	描述
1	测试技术方案	我们针对提出来的技术问题寻找了相应的技术解决方案，但是否确实可行，仍然需要通过测试才能最终确定。因此，第一步完成技术方案的测试。
2	方程编辑	整合技术方案，完成独立的LaTeX方程编辑器。
3	方程操作	以方程为单位进行操作，从笔记中插入、编辑、删除、……
4	快捷输入	实现快捷输入栏，辅助方程编辑
5	支持MathML	支持MathML格式的方程
6	样式	为方程指定文字大小、颜色、……等样式属性

『神马笔记』的第一个方程实现方案，在技术方案可行的前提下，将实现方程编辑和操作2个过程，实现在笔记中插入数学公式。至于快捷输入、MathML支持、方程样式将在未来的后续版本中陆续实现。

五、示例方程

1.

2.

\begin{array}{l}\forall\varepsilon\in\mathbb{R}_+^*\ \exists\eta>0\ |x-x_0|\leq\eta\Longrightarrow|f(x)-f(x_0)|\leq\varepsilon\\\det\begin{bmatrix}a_{11}&a_{12}&\cdots&a_{1n}\\a_{21}&\ddots&&\vdots\\\vdots&&\ddots&\vdots\\a_{n1}&\cdots&\cdots&a_{nn}\end{bmatrix}\overset{\mathrm{def}}{=}\sum_{\sigma\in\mathfrak{S}_n}\varepsilon(\sigma)\prod_{k=1}^n a_{k\sigma(k)}\\\sideset{_\alpha^\beta}{_\gamma^\delta}{\begin{pmatrix}a&b\\c&d\end{pmatrix}}\\\int_0^\infty{x^{2n} e^{-a x^2}\,dx} = \frac{2n-1}{2a} \int_0^\infty{x^{2(n-1)} e^{-a x^2}\,dx} = \frac{(2n-1)!!}{2^{n+1}} \sqrt{\frac{\pi}{a^{2n+1}}}\\\int_a^b{f(x)\,dx} = (b - a) \sum\limits_{n = 1}^\infty  {\sum\limits_{m = 1}^{2^n  - 1} {\left( { - 1} \right)^{m + 1} } } 2^{ - n} f(a + m\left( {b - a} \right)2^{-n} )\\\int_{-\pi}^{\pi} \sin(\alpha x) \sin^n(\beta x) dx = \textstyle{\left \{ \begin{array}{cc} (-1)^{(n+1)/2} (-1)^m \frac{2 \pi}{2^n} \binom{n}{m} & n \mbox{ odd},\ \alpha = \beta (2m-n) \\ 0 & \mbox{otherwise} \\ \end{array} \right .}\\L = \int_a^b \sqrt{ \left|\sum_{i,j=1}^ng_{ij}(\gamma(t))\left(\frac{d}{dt}x^i\circ\gamma(t)\right)\left(\frac{d}{dt}x^j\circ\gamma(t)\right)\right|}\,dt\\\begin{array}{rl} s &= \int_a^b\left\|\frac{d}{dt}\vec{r}\,(u(t),v(t))\right\|\,dt \\ &= \int_a^b \sqrt{u'(t)^2\,\vec{r}_u\cdot\vec{r}_u + 2u'(t)v'(t)\, \vec{r}_u\cdot\vec{r}_v+ v'(t)^2\,\vec{r}_v\cdot\vec{r}_v}\,\,\, dt. \end{array}\\\end{array}

3.

\text{A long division \longdiv{12345}{13}

4.

{a \bangle b} {c \brace d} {e \brack f} {g \choose h}

5.

\begin{array}{cc}\fbox{\text{A framed box with \textdbend}}&\shadowbox{\text{A shadowed box}}\cr\doublebox{\text{A double framed box}}&\ovalbox{\text{An oval framed box}}\cr\end{array}

6.

\frac{\partial f}{\partial x} = 2\,\sqrt{a}\,x

7.

\[Mn{{O}_{2}}/M{{n}_{2}}{{O}_{3}}+{{H}_{2}}\to M{{n}_{3}}{{O}_{4}}\]

8.

\[M{{n}_{3}}{{O}_{4}}+{{H}_{2}}\to MnO\]

9.

$a^2+b^2=c^2$

六、Next

欲知技术方案是否可行，还请继续关注『神马笔记』。

七、Finally

～遥岑远目～献愁供恨～玉簪螺髻～