Skip to main content

Section 7 Mathematics

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. The PreTeXt Guide has a link to the complete list of macros supported by MathJax. We load the AMSsymbols library and the library for extensible arrows, extpfeil.

Subsection 7.1 Basic 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\label{equation-system-begin}\tag{7.1}\\ \frac{dy}{dt} \amp = x^3 - y.\label{equation-system-end}\tag{7.2} \end{align}

Subsection 7.2 Displayed 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 have created the pre-defined macro \amp as one way specify these, but the escape sequence & may be used also. 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 ampersands 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*}

Beautiful.

A long equation, to check layout on various screen sizes. This is Weil's “explicit formula” for the Riemann \(\zeta\)-function:

\begin{equation} \sum_\gamma S_-(\gamma) = \frac{\log Q}{\pi} \hat S_-(0) + \frac{1}{2\pi} \sum_{j=1}^d \Re\left\{ \int_{-\infty}^\infty \frac{\Gamma'}{\Gamma}\left(\frac{1}{4} + \frac{it}{2} + \mu_j\right)S_-(t) dt\right\} - \frac{d}{2\pi}\hat S_-(0)\log \pi\text{.}\tag{7.3} \end{equation}

In print versions, a long run of displayed equations often needs to be broken across pages. If you are reading some other version of this, then there is nothing to see here. But for output it could be interesting. First, with no extra effort, this page-long display should break naturally, no matter how the preceding material changes.

\begin{gather*} x^2+y^2=z^2\\ a^2+b^2=c^2\\ \alpha^2+\beta^2=\gamma^2\\ m^2+n^2=p^2\\ x^2+y^2=z^2\\ a^2+b^2=c^2\\ \alpha^2+\beta^2=\gamma^2\\ m^2+n^2=p^2\\ x^2+y^2=z^2\\ a^2+b^2=c^2\\ \alpha^2+\beta^2=\gamma^2\\ m^2+n^2=p^2\\ x^2+y^2=z^2\\ a^2+b^2=c^2\\ \alpha^2+\beta^2=\gamma^2\\ m^2+n^2=p^2\\ x^2+y^2=z^2\\ a^2+b^2=c^2\\ \alpha^2+\beta^2=\gamma^2\\ m^2+n^2=p^2\\ x^2+y^2=z^2\\ a^2+b^2=c^2\\ \alpha^2+\beta^2=\gamma^2\\ m^2+n^2=p^2\\ x^2+y^2=z^2\\ a^2+b^2=c^2\\ \alpha^2+\beta^2=\gamma^2\\ m^2+n^2=p^2\\ x^2+y^2=z^2\\ a^2+b^2=c^2\\ \alpha^2+\beta^2=\gamma^2\\ m^2+n^2=p^2\\ x^2+y^2=z^2\\ a^2+b^2=c^2\\ \alpha^2+\beta^2=\gamma^2\\ m^2+n^2=p^2\\ x^2+y^2=z^2\\ a^2+b^2=c^2\\ \alpha^2+\beta^2=\gamma^2\\ m^2+n^2=p^2\\ x^2+y^2=z^2\\ a^2+b^2=c^2\\ \alpha^2+\beta^2=\gamma^2\\ m^2+n^2=p^2\\ x^2+y^2=z^2\\ a^2+b^2=c^2\\ \alpha^2+\beta^2=\gamma^2\\ m^2+n^2=p^2\text{.} \end{gather*}

In this version we have turned off page breaking for the entire display, but then allowed a break at every fourth equation, so you should see a reasonably attractive page break right after one of the \(m^2+n^2=p^2\) equations.

\begin{gather} x^2+y^2=z^2\tag{7.4}\\ a^2+b^2=c^2\tag{7.5}\\ \alpha^2+\beta^2=\gamma^2\tag{7.6}\\ m^2+n^2=p^2\tag{7.7}\\ x^2+y^2=z^2\tag{7.8}\\ a^2+b^2=c^2\tag{7.9}\\ \alpha^2+\beta^2=\gamma^2\tag{7.10}\\ m^2+n^2=p^2\tag{7.11}\\ x^2+y^2=z^2\tag{7.12}\\ a^2+b^2=c^2\tag{7.13}\\ \alpha^2+\beta^2=\gamma^2\tag{7.14}\\ m^2+n^2=p^2\tag{7.15}\\ x^2+y^2=z^2\tag{7.16}\\ a^2+b^2=c^2\tag{7.17}\\ \alpha^2+\beta^2=\gamma^2\tag{7.18}\\ m^2+n^2=p^2\tag{7.19}\\ x^2+y^2=z^2\tag{7.20}\\ a^2+b^2=c^2\tag{7.21}\\ \alpha^2+\beta^2=\gamma^2\tag{7.22}\\ m^2+n^2=p^2\tag{7.23}\\ x^2+y^2=z^2\tag{7.24}\\ a^2+b^2=c^2\tag{7.25}\\ \alpha^2+\beta^2=\gamma^2\tag{7.26}\\ m^2+n^2=p^2\tag{7.27}\\ x^2+y^2=z^2\tag{7.28}\\ a^2+b^2=c^2\tag{7.29}\\ \alpha^2+\beta^2=\gamma^2\tag{7.30}\\ m^2+n^2=p^2\tag{7.31}\\ x^2+y^2=z^2\tag{7.32}\\ a^2+b^2=c^2\tag{7.33}\\ \alpha^2+\beta^2=\gamma^2\tag{7.34}\\ m^2+n^2=p^2\tag{7.35}\\ x^2+y^2=z^2\tag{7.36}\\ a^2+b^2=c^2\tag{7.37}\\ \alpha^2+\beta^2=\gamma^2\tag{7.38}\\ m^2+n^2=p^2\tag{7.39}\\ x^2+y^2=z^2\tag{7.40}\\ a^2+b^2=c^2\tag{7.41}\\ \alpha^2+\beta^2=\gamma^2\tag{7.42}\\ m^2+n^2=p^2\tag{7.43}\\ x^2+y^2=z^2\tag{7.44}\\ a^2+b^2=c^2\tag{7.45}\\ \alpha^2+\beta^2=\gamma^2\tag{7.46}\\ m^2+n^2=p^2\tag{7.47}\\ x^2+y^2=z^2\tag{7.48}\\ a^2+b^2=c^2\tag{7.49}\\ \alpha^2+\beta^2=\gamma^2\tag{7.50}\\ m^2+n^2=p^2\text{.}\tag{7.51} \end{gather}

So. Do not take any extra steps and let figure out the breaks. If you do not like a break, modify the md or mdn to go back to the AMSmath default behavior and not break at all. Ever. Or rather, go further and modify an individual mrow to suggest that it is a good place for a break.

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.

Subsection 7.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.

Subsection 7.4 Advanced 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, since we do not allow most markup inside mathematics.

\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}}\\ &=F+G&&\knowl{./knowl/theorem-number-01.html}{\text{A nice result}}\text{.} \end{align*}

Scott Beaver likes to write short chains of equalities all in one line, with the cross-references sitting on each equals sign. Here we test the \overset and \underset macros wrapping a PreTeXt <xref>, with and without content, inside an <me> element. Note that \stackrel is obsolete, and \overunderset is not yet supported by MathJax (but see GitHub #2704 1 ). The mathematics is Scott's, the reasons are totally unrelated to the math.

\begin{equation*} AC-AD \overset{\knowl{./knowl/theorem-FTC.html}{2.1}}{=} A(C-D) \underset{\knowl{./knowl/definition-indefinite-integral.html}{2.2}}{=} A0_{n\times p} \overset{\knowl{./knowl/theorem-FTC.html}{Thm. 2.1}}{=} 0_{m\times p} \end{equation*}

We suggest using cross-references that only display numbers (<xref> with @text set to global) since if you stick to elements like <theorem>, <lemma>, <definition>, or <axiom>, then the numbers will be unambiguous and the target of the cross-reference will contain full information. But note that if you mix in divisions, or perhaps figures, as reasons then there is a possibility that numbers will need to be qualified by their type. We have provided an abbreviation for one cross-reference to Theorem 2.1 (which will not benefit from automatic translation to other languages).

github.com/mathjax/MathJax/issues/2704

Subsection 7.5 Local Tags on Equations

If you are not writing a research monograph, maybe (a) you will not use many numbered equations, or do not like the looks of them, or feel they scare your readers, and (b) maybe your cross-references are always local-ish, like strictly within an example or a proof. For this situation you can create, and employ, a “local” tag on a displayed equation. Nothing enforces the idea of what constitutes local, and there is nothing to stop you from using the same symbols more than once. With freedom comes responsibility.

Use the @tag attribute on an mrow, only. (Remember, you can have just one mrow.) The behavior is identical within an md or mdn. The value of the @tag attribute is a symbol name. The prefix d means “double”, and the prefix t means “triple”. So allowed values are

star, dstar, tstar
dagger, ddagger, tdagger
daggerdbl, ddaggerdbl, tdaggerdbl
hash, dhash, thash
maltese, dmaltese, tmaltese

Cross-references to these tagged equations happens in the usual way and should behave as expected. We test the double versions to make sure the symbols render properly in various output formats.

\begin{align} c^2 \amp = a^2+b^2\label{equation-local-star}\tag{✶✶}\\ c^2 \amp = a^2+b^2\label{equation-local-dagger}\tag{††}\\ c^2 \amp = a^2+b^2\label{equation-local-daggerdbl}\tag{‡‡}\\ c^2 \amp = a^2+b^2\label{equation-local-hash}\tag{##}\\ c^2 \amp = a^2+b^2\label{equation-local-maltese}\tag{✠✠}\\ z^2 \amp = x^2+y^2\tag{7.52} \end{align}

Here are the local cross-references: (✶✶), (††), (‡‡), (##), (✠✠). We test another farther away in Section 18, contrary to our advice above.

Subsection 7.6 Commutative Diagrams

This diagram is authored by Tom Judson using the syntax of the AMS “CD” package. Inside of a <me> element start with \begin{CD}. Remember to escape the less-than character.

\begin{equation*} \begin{CD} E[x]/\langle p(x) \rangle @>\psi>> F[x]/\langle q(x) \rangle\\ @VV{\sigma}V @VV{\tau}V\\ E(\alpha) @>\overline{\phi}>> F(\beta)\\ @VVV @VVV\\ E @>\phi>> F \end{CD} \end{equation*}

While this package is not as flexible as some generic drawing packages, it has the advantage of full support by MathJax, and thus the HTML version will be more accessible.

Subsection 7.7 Line-Breaking after Mathematics

As of 2021-05-14, in HTML output the next sentence should just fill a full line across the page. We take active measures to bind the concluding period to the final bit of mathematics, the variable \(x\text{.}\) The prevents a bad line break which could see the period begin a new line, all by itself. In the event that the line-breaking siutation improves, we could relax these measures. This testing is only relevant to HTML output, not output.

xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx \(x\text{.}\)

Subsection 7.8 Miscellaneous

In HTML output, a MathJax workaround for a Safari rendering bug was inserting extra spaces after textual subscripts and superscripts (MathJax thread 2 ). PreTeXt CSS now applies a correction. The following tests if the CSS fix is sufficient, and could be used to test the necessity of our fix in the future. Following is the original report, though NOT has been moved to a superscript:

\begin{gather*} T_\text{clk}-t_\text{su} \gt t_\text{clk-Q} + \max\left( t_\text{XOR}, t^\text{NOT} \right)\text{.} \end{gather*}

There should not be anything to see in /PDF output. (2021-10-21)

groups.google.com/g/mathjax-users/c/ANjLK9KtcWA/m/vlHaPja-AwAJ