Skip to main content
\(\require{cancel}\newcommand{\definiteintegral}[4]{\int_{#1}^{#2}\,#3\,d#4} \newcommand{\myequation}[2]{#1\amp =#2} \newcommand{\indefiniteintegral}[2]{\int#1\,d#2} \newcommand{\testingescapedpercent}{ \% } \newcommand{\lt}{<} \newcommand{\gt}{>} \newcommand{\amp}{&} \)


To be able to create both and HTML output (plus variations), we rely on MathJax, which in turn supports an extensive subset of the mathematical symbols normally available. The AMSMath symbol set is a good approximation. For a complete list, see the MathJax Supported LaTeX commands. We load the AMSsymbols library and the library for extensible arrows, extpfeil.

Subsection7.1Basic Mathematics

The following is from the MathJax demonstration page, an identity due to Ramanujan:

\begin{equation*} \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } } \end{equation*}

And again, from the MathJax demonstration page, Maxwell's equations:

\begin{align*} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}}\\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho\\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}}\\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{align*}

A small test that the extensible arrows library is included properly:

\begin{equation*} A\xmapsto[\text{bijection}]{\Phi+\Psi+\Theta}B \end{equation*}

Look back at the top of the source file of this document to see how to include your macros just once. For best results keep your macros simple and semantic.

Chris Hughes has made available “slanted”, or “beveled”, or “nice” fractions. To wit, we mean fractions such as: \(\sfrac{3}{8}\text{.}\) Use the built-in \sfrac{}{} macro in your mathematics to achieve this presentation.

We consider a system of equations. We number the first and last equation (there are just two) and include an xml:id on each. We reference the whole system later as the range of equations from the first to the last.

\begin{align} \frac{dx}{dt} \amp = x^2 - 4x - y + 4\tag{7.1}\\ \frac{dy}{dt} \amp = x^3 - y.\tag{7.2} \end{align}

Subsection7.2Displayed Mathematics

Multi-line displays of mathematics are achieved with the md tag (“math display”), and the variant that produces numbers on each line, mdn (“math display numbered”), used within a paragraph (p). As a good example of how XML syntax is superior, you author \(n\) lines of equations by enclosing each line inside of a mrow tag, rather than using \(n-1\) separators (such as \\).

If you use no ampersands to express alignment (read ahead), then each equation is centered independently on the width of the text. This is implemented according to the AMSmath package's gather environment. Example:

\begin{gather*} \frac{dx}{dt} = x^2 - 4x - y + 4\\ \frac{dy}{dt} = x^3 - y. \end{gather*}

An ampersand is used, in two ways, to describe positioning several equations per line, organized in columns. We suggest in Subsection 8.1 that the pre-defined macro \amp is the safest way to specify these. The second, fourth, sixth, … ampersands separate columns, and the spacing between columns will be provided automatically. The first, third, fifth, … ampersands are alignment points for the equations in each column. Typically this is placed just prior to a binary operator, such as an equal sign (\amp = ), or for a column of explanations or commentary, just prior to the \text{} macro. Note that this scenario suggests always having an odd number of amersands in each mrow. In the example below, alignment is on the equals sign in the first two columns, and provides left-justification to the explanations in the third column. N.B.: the use below of the \text{} macro does not include mathematics within its argument. Doing so may yield unpredictable results depending on your choice of delimiters for the mathematics (and using an m tag will be ineffective).

\begin{align*} \frac{dx}{dt} \amp = x^2 - 4x - y + 4 \amp \frac{dy}{dt} \amp = x^3 - y \amp\amp x, y\text{ version}\\ \frac{dw}{dt} \amp = z^3 - w \amp \frac{dz}{dt} \amp = z^2 - 4z - w + 4 \amp\amp z, w\text{ version} \end{align*}

PreTeXt will automatically detect the presence or absence of ampersands, but by defining macros for entire aligned equations, you can effectively hide the ampersands. So the @alignment attribute can override automatic detection. We use a simple macro to demonstrate setting alignment='align' to override the use of a gather environment and use a align environment instead. Example:

\begin{align*} \myequation{\frac{dx}{dt}}{x^2 - 4x - y + 4}\\ \myequation{\frac{dy}{dt}}{x^3 - y}. \end{align*}

The AMSmath package's alignat environment is a third variant of alignment. It never happens automatically, you need to ask for it with alignment="alignat". It is very similar to align but adds no space between the equation columns. So you can leave it that way, or you can add your own “extra” space to suit. Here is a previous example with no inter-column space:

\begin{alignat*}{3} \frac{dx}{dt} \amp = x^2 - 4x - y + 4 \amp \frac{dy}{dt} \amp = x^3 - y \amp\amp x, y\text{ version}\\ \frac{dw}{dt} \amp = z^3 - w \amp \frac{dz}{dt} \amp = z^2 - 4z - w + 4 \amp\amp z, w\text{ version}\text{.} \end{alignat*}

This modified example has a middle row with three columns, while the other rows have just one column, as a test of our routines for determining the mrow with the greatest number of ampersands (and how many there are),

\begin{alignat*}{3} \frac{dw}{dt} &= z^3 - w\\ \frac{dx}{dt} &= x^2 - 4x - y + 4 & \frac{dy}{dt} &= x^3 - y&& x, y\text{ third column}\\ \frac{dw}{dt} & = z^3 - w\text{.} \end{alignat*}

Final example demonstrates that ampersands in other objects (matrices here) can wreak havoc with computing the number of columns. So we provide yet another attribute to override automatic detection, alignat-columns. This is the number of columns not the number of ampersands. Generally, for \(c\) columns, there will be \(2c-1\) ampersands.

\begin{alignat*}{2} A &= \begin{bmatrix}1 & 2 \\ 3 & 4\end{bmatrix} & I &= \begin{bmatrix}1 & 0 \\ 0 & 1\end{bmatrix}\text{.} \end{alignat*}

One caveat: if your number of ampersands is even (see advice above about using an odd number) behavior should still be correct, as in next example.

If you want super-precise control over alignment of the terms of a system of equations (linear or not) you can use the alignat option to advantage by not including any extra space. This example is modified slightly from a post by Alex Jordan:

\begin{alignat*}{4} 2x \amp {}+{} \amp y \amp {}+{} \amp 3z \amp {}={} \amp 10\\ x \amp \amp \amp {}+{} \amp z \amp {}={} \amp 6\\ x \amp {}+{} \amp 3y \amp {}+{} \amp 2z \amp {}={} \amp 13. \end{alignat*}


This is a poorly-authored paragaph to test the conversion to HTML. There are two displayed equations, separated by a period ending the first one's sentence, which should migrate into the display, and not leave behind an empty paragraph:

\begin{equation*} z+y = z\text{.} \end{equation*} \begin{equation*} a + b = c\text{.} \end{equation*}

This final sentence should remain, inside another HTML paragraph, without the second equation's period.

Subsection7.3 Packages and MathJax Extensions

If you would like to use macros from a package and there is a MathJax extension of the same name which implements the same macros, then you may use these with your mathematics as we demonstrate here.

This example is from Jason Underdown. The package is named cancel and is included in the TeXLive distribution, so is fairly standard. The particular macro being demonstrated is \cancelto{}{}.

\begin{equation*} \lim_{b \rightarrow \infty}\left[\cancelto{0}{-\frac{1}{s}e^{-sb}} + \frac{1}{s}\right]\text{.} \end{equation*}

Look at the source of this article to see the package name being supplied in a latex-preamble/package element within the docinfo section. That is the only setup required to make the macro usable in and HTML output.

The packages appear before the author-supplied macros, so you can use macros from the packages as building blocks for document-specific macros. We cannot guarantee there will be no conflicts between additional packages and those in use normally, or added in the future. So use at your own risk.

Subsection7.4Advanced Mathematics

MathJax is extremely capable in rendering a subset of in web browsers, and improving all the time. You can get fairly fancy with some of its supported commands. In particular, if you need to mix in a few words with your mathematics, the \text{} macro is supported. For example, you might use an “if” or an “otherwise” in the definition of a piecewise function.

Consider that the first line below is text sandwiched in-between two Greek letters, wrapped in a \text{} macro. In HTML output we have taken care that the font for text material within display mathematics should match the font of the surrounding paragraph, as also happens with output. The second line is nearly identical in the source, but is just naked text being rendered like a slew of variables.

\begin{gather*} \alpha\text{ is not equal to }\beta\\ \alpha is not equal to \beta\\ \alpha\neq\beta\text{.} \end{gather*}

We are not suggesting here that using words in place of symbols, as in the first line, is a good practice. (It is not.)

The following example is a good stress-test of using the \text{} macro to achieve certain effects. Note the Unicode left and right smart quotes. This a contribution from Alex Jordan as part of his work on APEX Calculus.

\begin{gather*} y \rightarrow \frac{\sin(0) }{0} \rightarrow {{\text{“}}\atop{}}\frac{0}{0}{{\text{”}}\atop{}}\text{.} \end{gather*}

And another one from Alex. Note the use of the \mathord{} and \mathrel{} macros to control spacing around the mathematical symbols. Examine the source to see how the quotation marks have been authored with XML syntax for Unicode characters.

\begin{gather*} \zeta(1)=\sum_{n=1}^{\infty}\frac{1}{n}\mathrel{\text{ “}\mathord{=}{\text{” }}}\prod_{p}\left(\frac{1}{1-1/p}\right)=\prod_{p}\left(\frac{1}{1-p^{-1}}\right) \end{gather*}

Generally, you cannot use any XML elements inside of the mathematics elements. An exception is the xref element which you might want to use to provide justifications for the steps of a derivation. Here is a visual example that is mathematically meaningless,

\begin{align*} A&=B+C&&\knowl{./knowl/corollary-FTC-derivative.html}{\text{Corollary 4.1}}\\ &=D+E&&\knowl{./knowl/theorem-FTC.html}{\text{The Fundamental Theorem of Calculus}}\text{.} \end{align*}