How various formats can deal with LaTeX math

Authors:Hans Petter Langtangen
Date:May 29, 2016

Summary. The purpose of this document is to test LaTeX math in DocOnce with various output formats. Most LaTeX math constructions are renedered correctly by MathJax in plain HTML, but some combinations of constructions may fail. Unfortunately, only a subset of what works in html MathJax also works in sphinx MathJax. The same is true for markdown MathJax expresions (e.g., Jupyter notebooks). Tests and examples are provided to illustrate what may go wrong.

The recommendation for writing math that translates to MathJax in html, sphinx, and markdown is to stick to the environments \[ ... \], equation, equation*, align, align*, alignat, and alignat* only. Test the math with sphinx output; if it works in that format, it should work elsewhere too.

The current version of the document is translated from DocOnce source to the format sphinx.

Test of equation environments

Test 1: Inline math

We can get an inline equation $u(t)=e^{-at}$ rendered as \(u(t)=e^{-at}\).

Test 2: A single equation with label

An equation with number,

!bt
\begin{equation} u(t)=e^{-at} label{eq1a}\end{equation}
!et

looks like

(1)\[ u(t)=e^{-at}\]

Maybe this multi-line version is what we actually prefer to write:

!bt
\begin{equation}
u(t)=e^{-at}
label{eq1b}
\end{equation}
!et

The result is the same:

(2)\[ u(t)=e^{-at}\]

We can refer to this equation through its label eq1b: (2).

Test 3: Multiple, aligned equations without label and number

MathJax has historically had some problems with rendering many LaTeX math environments, but the align* and align environments have always worked.

!bt
\begin{align*}
u(t)&=e^{-at}\\
v(t) - 1 &= \frac{du}{dt}
\end{align*}
!et

Result:

\[\begin{split}\begin{align*} u(t)&=e^{-at}\\ v(t) - 1 &= \frac{du}{dt} \end{align*}\end{split}\]

Test 4: Multiple, aligned equations with label

Here, we use align with user-prescribed labels:

!bt
\begin{align}
u(t)&=e^{-at}
label{eq2b}\\
v(t) - 1 &= \frac{du}{dt}
label{eq3b}
\end{align}
!et

Result:

(3)\[ u(t)=e^{-at}\]
(4)\[ v(t) - 1 = \frac{du}{dt}\]

We can refer to the last equations as the system (3)-(4).

Note: align/alignat environments with labels are anti-aligned in sphinx

Actually, sphinx does not support the align environment with labels, such as we write above, but DocOnce splits in this case the equations into separate, single equations with labels. Hence the user can write one code with align and labels and have it automatically to work in latex, html, sphinx, notebooks, and other formats. The generated sphinx code in the present case is

.. math::
   :label: eq2b

        u(t)=e^{-at}


.. math::
   :label: eq3b

        v(t) - 1 = \frac{du}{dt}

If DocOnce had not rewritten the equation it would be rendered in sphinx as nicely aligned equations without numbers (i.e., as if we had used the align* environment):

\[\begin{split}\begin{align} u(t)&=e^{-at} \\\ v(t) - 1 &= \frac{du}{dt} \ \end{align}\end{split}\]

Test 5: Multiple, aligned equations without label

In LaTeX, equations within an align environment is automatically given numbers. To ensure that an html document with MathJax gets the same equation numbers as its latex/pdflatex companion, DocOnce generates labels in equations where there is no label prescribed. For example,

!bt
\begin{align}
u(t)&=e^{-at}
\\
v(t) - 1 &= \frac{du}{dt}
\end{align}
!et

is edited to something like

!bt
\begin{align}
u(t)&=e^{-at}
label{_auto5}\\
v(t) - 1 &= \frac{du}{dt}
label{_auto6}
\end{align}
!et

and the output gets the two equation numbered. Note that in sphinx the alignment is removed and separate equation environments are used to get numbered equations in equation systems, cf. the box above.

(5)\[ u(t)=e^{-at}\]
(6)\[ v(t) - 1 = \frac{du}{dt}\]

Test 6: Multiple, aligned equations with multiple alignments

The align environment can be used with two & alignment characters, e.g.,

!bt
\begin{align}
\frac{\partial u}{\partial t} &= \nabla^2 u, & x\in (0,L),
\ t\in (0,T]\\
u(0,t) &= u_0(x), & x\in [0,L]
\end{align}
!et

The result in sphinx becomes

(7)\[ \frac{\partial u}{\partial t} = \nabla^2 u, x\in (0,L), \ t\in (0,T]\]
(8)\[ u(0,t) = u_0(x), x\in [0,L]\]

In sphinx, all alignments are removed, so this double use of & results in ugly typesetting!

A better solution is usually to use an alignat environment:

!bt
\begin{alignat}{2}
\frac{\partial u}{\partial t} &= \nabla^2 u, & x\in (0,L),
\ t\in (0,T]\\
u(0,t) &= u_0(x), & x\in [0,L]
\end{alignat}
!et

with the rendered result

(9)\[ \frac{\partial u}{\partial t} = \nabla^2 u, x\in (0,L), \ t\in (0,T]\]
(10)\[ u(0,t) = u_0(x), x\in [0,L]\]

align/alignat environments with equation numbers are anti-aligned

In the sphinx, ipynb, and pandoc output formats, DocOnce rewrites the equations in an alignat environment as individual equations in equation environments (or more precisely, sphinx can work with alignat* so only numbered alignat equations get rewritten as individual equations). If the alignment is somewhat important, try the best with a manual rewrite in terms of separate equation environments, and stick to align* and alignat* in sphinx.

With alignat* in sphinx, the equations above are typeset nicely as

\[\begin{split}\begin{alignat*}{2} \frac{\partial u}{\partial t} &= \nabla^2 u, & x\in (0,L), \ t\in (0,T]\\ u(0,t) &= u_0(x), & x\in [0,L] \end{alignat*}\end{split}\]

Note that if DocOnce had not rewritten of the above equations, they would be rendered similarly in sphinx as

\[\begin{split}\begin{alignat}{2} \frac{\partial u}{\partial t} &= \nabla^2 u, & x\in (0,L), \ t\in (0,T]\\ u(0,t) &= u_0(x), & x\in [0,L] \end{alignat}\end{split}\]

That is, the equation numbers are gone.

Test 7: Multiple, aligned eqnarray equations without label

Let us try the old eqnarray* environment.

!bt
\begin{eqnarray*}
u(t)&=& e^{-at}\\
v(t) - 1 &=& \frac{du}{dt}
\end{eqnarray*}
!et

which results in

\[\begin{split}\begin{eqnarray*} u(t) &= e^{-at}\\ v(t) - 1 &= \frac{du}{dt} \end{eqnarray*}\end{split}\]

Test 8: Multiple, eqnarrayed equations with label

Here we use eqnarray with labels:

!bt
\begin{eqnarray}
u(t)&=& e^{-at}
label{eq2c}\\
v(t) - 1 &=& \frac{du}{dt}
label{eq3c}
\end{eqnarray}
!et

which results in

\[\begin{split}\begin{eqnarray} u(t) &= e^{-at} \\ v(t) - 1 &= \frac{du}{dt} \end{eqnarray}\end{split}\]

Can we refer to the last equations as the system (?)-(?) in the sphinx format? No, unfortunately not. Sphinx cannot deal with equation numbers in eqnarray environments and typeset them as if they were eqnarray*. But MathJax supports eqnarray with labels. The rule of thumb is to use align and not eqnarray!

Test 9: The multiline environment with label and number

The LaTeX code

!bt
\begin{multline}
\int_a^b f(x)dx = \sum_{j=0}^{n} \frac{1}{2} h(f(a+jh) +
f(a+(j+1)h)) \\
=\frac{h}{2}f(a) + \frac{h}{2}f(b) + \sum_{j=1}^n f(a+jh)
label{multiline:eq1}
\end{multline}
!et

gets rendered as

(11)\[\begin{split} \int_a^b f(x)dx = \sum_{j=0}^{n} \frac{1}{2} h(f(a+jh) + f(a+(j+1)h)) \\ =\frac{h}{2}f(a) + \frac{h}{2}f(b) + \sum_{j=1}^n f(a+jh)\end{split}\]

and we can hopefully refer to the Trapezoidal rule as the formula (11).

This equation will not render in sphinx unless we remove the multiline environment, which means that it was typeset here without any multiline information. The best cross-format solution is to use align instead of multiline with \nonumber in the first equation!

Test 10: Splitting equations using a split environment

Although align can be used to split too long equations, a more obvious command is split:

!bt
\begin{equation}
\begin{split}
\int_a^b f(x)dx = \sum_{j=0}^{n} \frac{1}{2} h(f(a+jh) +
f(a+(j+1)h)) \\
=\frac{h}{2}f(a) + \frac{h}{2}f(b) + \sum_{j=1}^n f(a+jh)
\end{split}
\end{equation}
!et

The result becomes

(12)\[\begin{split} \begin{split} \int_a^b f(x)dx = \sum_{j=0}^{n} \frac{1}{2} h(f(a+jh) + f(a+(j+1)h)) \\ =\frac{h}{2}f(a) + \frac{h}{2}f(b) + \sum_{j=1}^n f(a+jh) \end{split}\end{split}\]

Test 11: Newcommands and boldface bm vs pmb

First we use the plain old pmb package for bold math. The formula

!bt
\[ \frac{\partial\u}{\partial t} +
\u\cdot\nabla\u = \nu\nabla^2\u -
\frac{1}{\varrho}\nabla p,\]
!et

and the inline expression $\nabla\pmb{u} (\pmb{x})\cdot\pmb{n}$ (with suitable newcommands using pmb) get rendered as

\[\frac{\partial\pmb{u}}{\partial t} + \pmb{u}\cdot\nabla\pmb{u} = \nu\nabla^2\pmb{u} - \frac{1}{\varrho}\nabla p,\]

and \(\nabla\pmb{u} (\pmb{x})\cdot\pmb{n}\). DocOnce replaces newcommands by the actual latex code when requesting the sphinx output format.

Somewhat nicer fonts may appear with the more modern \bm command:

!bt
\[ \frac{\partial\ubm}{\partial t} +
\ubm\cdot\nabla\ubm = \nu\nabla^2\ubm -
\frac{1}{\varrho}\nabla p,\]
!et

(backslash ubm is a newcommand for bold math \(u\)), for which we get

\[\frac{\partial\boldsymbol{u}}{\partial t} + \boldsymbol{u}\cdot\nabla\boldsymbol{u} = \nu\nabla^2\boldsymbol{u} - \frac{1}{\varrho}\nabla p.\]

Moreover,

$\nabla\boldsymbol{u}(\boldsymbol{x})\cdot\boldsymbol{n}$

becomes \(\nabla\boldsymbol{u}(\boldsymbol{x})\cdot\boldsymbol{n}\).

Warning

Note: for the sphinx format, \bm was substituted by DocOnce to \boldsymbol.

Problematic equations

Finally, we collect some problematic formulas in MathJax. They all work fine in LaTeX. Most of them look fine in html too, but some fail in sphinx, ipynb, or markdown.

Colored terms in equations

The LaTeX code

!bt
\[ {\color{blue}\frac{\partial\u}{\partial t}} +
\nabla\cdot\nabla\u = \nu\nabla^2\u -
\frac{1}{\varrho}\nabla p,\]
!et

results in

\[{\color{blue}\frac{\partial\pmb{u}}{\partial t}} + \nabla\cdot\nabla\pmb{u} = \nu\nabla^2\pmb{u} - \frac{1}{\varrho}\nabla p,\]

but correct rendering in sphinx requires omitting the \color command:

\[\frac{\partial\pmb{u}}{\partial t} + \nabla\cdot\nabla\pmb{u} = \nu\nabla^2\pmb{u} - \frac{1}{\varrho}\nabla p,\]

Bar over symbols

Sometimes one must be extra careful with the LaTeX syntax to get sphinx MathJax to render a formula correctly. Consider the combination of a bar over a bold math symbol:

!bt
\[ \bar\f = f_c^{-1}\f,\]
!et

which for sphinx output results in

\[\bar\boldsymbol{f} = f_c^{-1}\boldsymbol{f}.\]

With sphinx, this formula is not rendered. However, using curly braces for the bar,

!bt
\[ \bar{\f} = f_c^{-1}\f,\]
!et

makes the output correct also for sphinx:

\[\bar{\boldsymbol{f}} = f_c^{-1}\boldsymbol{f},\]

Matrix formulas

Here is an align environment with a label and the pmatrix environment for matrices and vectors in LaTeX.

!bt
\begin{align}
\begin{pmatrix}
G_2 + G_3 & -G_3 & -G_2 & 0 \\
-G_3 & G_3 + G_4 & 0 & -G_4 \\
-G_2 & 0 & G_1 + G_2 & 0 \\
0 & -G_4 & 0 & G_4
\end{pmatrix}
&=
\begin{pmatrix}
v_1 \\
v_2 \\
v_3 \\
v_4
\end{pmatrix}
+ \cdots
label{mymatrixeq}\\
\begin{pmatrix}
C_5 + C_6 & -C_6 & 0 & 0 \\
-C_6 & C_6 & 0 & 0 \\
0 & 0 & 0 & 0 \\
0 & 0 & 0 & 0
\end{pmatrix}
\frac{d}{dt} &=
\begin{pmatrix}
v_1 \\
v_2 \\
v_3 \\
v_4
\end{pmatrix} =
\begin{pmatrix}
0 \\
0 \\
0 \\
-i_0
\end{pmatrix}
\end{align}
!et

which becomes

(13)\[\begin{split} \begin{pmatrix} G_2 + G_3 & -G_3 & -G_2 & 0 \\ -G_3 & G_3 + G_4 & 0 & -G_4 \\ -G_2 & 0 & G_1 + G_2 & 0 \\ 0 & -G_4 & 0 & G_4 \end{pmatrix} = \begin{pmatrix} v_1 \\ v_2 \\ v_3 \\ v_4 \end{pmatrix} + \cdots\end{split}\]
(14)\[\begin{split} \begin{pmatrix} C_5 + C_6 & -C_6 & 0 & 0 \\ -C_6 & C_6 & 0 & 0 \\ 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 0 \end{pmatrix} \frac{d}{dt} = \begin{pmatrix} v_1 \\ v_2 \\ v_3 \\ v_4 \end{pmatrix} = \begin{pmatrix} 0 \\ 0 \\ 0 \\ -i_0 \end{pmatrix}\end{split}\]

The same matrices without labels in an align* environment:

!bt
\begin{align*}
\begin{pmatrix}
G_2 + G_3 & -G_3 & -G_2 & 0 \\
-G_3 & G_3 + G_4 & 0 & -G_4 \\
-G_2 & 0 & G_1 + G_2 & 0 \\
0 & -G_4 & 0 & G_4
\end{pmatrix}
&=
\begin{pmatrix}
v_1 \\
v_2 \\
v_3 \\
v_4
\end{pmatrix}
+ \cdots \\
\begin{pmatrix}
C_5 + C_6 & -C_6 & 0 & 0 \\
-C_6 & C_6 & 0 & 0 \\
0 & 0 & 0 & 0 \\
0 & 0 & 0 & 0
\end{pmatrix}
\frac{d}{dt} &=
\begin{pmatrix}
v_1 \\
v_2 \\
v_3 \\
v_4
\end{pmatrix} =
\begin{pmatrix}
0 \\
0 \\
0 \\
-i_0
\end{pmatrix}
\end{align*}
!et

The rendered result becomes

\[\begin{split}\begin{align*} \begin{pmatrix} G_2 + G_3 & -G_3 & -G_2 & 0 \\ -G_3 & G_3 + G_4 & 0 & -G_4 \\ -G_2 & 0 & G_1 + G_2 & 0 \\ 0 & -G_4 & 0 & G_4 \end{pmatrix} &= \begin{pmatrix} v_1 \\ v_2 \\ v_3 \\ v_4 \end{pmatrix} + \cdots \\ \begin{pmatrix} C_5 + C_6 & -C_6 & 0 & 0 \\ -C_6 & C_6 & 0 & 0 \\ 0 & 0 & 0 & 0 \\ 0 & 0 & 0 & 0 \end{pmatrix} \frac{d}{dt} &= \begin{pmatrix} v_1 \\ v_2 \\ v_3 \\ v_4 \end{pmatrix} = \begin{pmatrix} 0 \\ 0 \\ 0 \\ -i_0 \end{pmatrix} \end{align*}\end{split}\]