Tutorial #2 - Authoring math-rich tutorials with TeX/LaTeX commands
About the tutorial
This tutorial explains how to write tutorials or courses that have math expressions, or scientific notations as often seen in scientific publications.
This tutorial is for learners at level of University Year 2
introduction
Most learning contents in science contain mathematical expressions and scientific notations. Hence, it is important to know how to write tutorials with math-rich content.
KBIES that empowers TrustOpen Education accept most LaTeX, MathML, and AsciiMath commands/notations for typesetting math expressions, thanks to MathJax JavaScript library. In this tutorial, our focus will be on how to use LaTeX environments and commands to present mathematical expressions.
Please note that not all TeX and LaTeX commands are recognized by MathJax. MathJax is for typesetting
mathematical expressions, not web contents in general.
Math expressions may appear inline within other learning content, or displayed on a line or paragraph alone, so-called display expressions.
Most \(LaTeX\) documentations use display formula or displayed formula to refer to math expressions that
are presented alone
Inline math expressions
To present an inline math expression, encolse the expression in a \\( ... \\) environment, as shown in the following example:
The sum of all integers from 1 to n can be written as \(\sum_{i=1}^n i \), which is equal to
\({{n+1}\over{2}} n\), or \( {{n^2+n}\over 2} \) by simplification.
which will be rendered as
The sum of all integers from 1 to n can be written as \(\sum_{i=1}^n i \), which is equal to
\({{n+1}\over{2}} n\), or \( {{n^2+n}\over 2} \) by simplification.
Display math expressions
To present a display math expression, enclose the expression within \$\$ ... \$\$ , which is called a \(LaTeX\) environment. The entire expression above can be presented as a display expression as follows:
$$\sum_{i=1}^n i = {{n+1}\over 2}\times{n} = {{n^2+n}\over 2} $$
which will be rendered as
$$ \sum_{i=1}^n i = {{n+1}\over 2}\times{n} = {{n^2+n}\over 2} $$
Instead of \$\$ ... \$\$ , you may also use \\[ ...
\\], which is \(LaTeX\) preferred, to enclose a display math expression, as shown in the example
below:
\[\sum_{i=1}^n i = {{n+1}\over 2}\times{n} = {{n^2+n}\over 2} \]
which will be rendered the same as
\[\sum_{i=1}^n i = {{n+1}\over 2}\times{n} = {{n^2+n}\over 2} \]
Please note the differences between inline math expressions and display math expressions:
- An inline math expression is rendered within other text of a paragraph, whereas a display math expression is rendered as a paragraph alone;
- Certain components of an inline math expression will be positioned differently from those in its display counterpart so that the inline math expression will not drastically change the line-spacing of the paragraph. This can be seen in the examples above from how components of a \(\sum\) operation are rendered differently between the inline mode and display mode above. Basically, components of an inline math expression are rendered in low-profile, whereas components of a dispaly math expression are rendered in bold and high-profile for DISPLAY.
- By default, all display math expressions are numbered, unless explicitly told not to number with \(LaTeX\) command \\nonumber , or in a starred \(LaTeX\) environment, which will be explained shortly.
$$
x_1+{1\over x_3+
{1\over x_5+
{1 \over x_7 +
{1 \over x_9}}}}\label{name11}
$$
which will be rendered as
$$
x_1+{1\over x_3+
{1\over x_5+
{1 \over x_7 +
{1 \over x_9}}}}\label{name11}
$$
and
\[
x_1+{1\over x_3+
{1\over x_5+
{1 \over x_7 +
{1 \over x_9}}}}
\]
which will be rendered the same as expression (\ref{name11}) above.
For better readability and control, when presenting more complicated math expressions, especially those taking multiple lines, instead of using \$\$ ... \$\$ or \\[ ... \\] to enclose the expression, you can use either \\begin{equation} ... \\end{equation} or \\begin{equation*} ... \\end{equation*} environments. In \(\LaTeX\) term, the former is called equation environment, and the latter is called starred equation environment.
The only difference between equation environment and equation* environment is that the math expression within equation environment will be numbered, whereas diplayed expression within equation* environment will not.
Here is an example using equation environment within which the expression will be numbered:
\begin{equation}
x+1\over\sqrt{1-x^2}
\end{equation}
which will be rendered as
\begin{equation}
x+1\over\sqrt{1-x^2}
\end{equation}
and here is an example using equation* within which the expression will not be numbered:
\begin{equation*}
x+1\over\sqrt{1-x^2}
\end{equation*}
which will be rendered as
\begin{equation*}
x+1\over\sqrt{1-x^2}
\end{equation*}
without a number.
Labelling and referring math expressions
From the examples above we have seen expressions with a number attached. By default, all display expressions, except those within a stared environment such as \\begin{equation*} ... \\end{equation*} environment, will be automatically numbered. If you really don't want a display expression to be numbered, you need explicitly tell that by adding a \nonumber command to the expression, as shown below:
$$\nonumber\sum_{i=0}^n i = {{n^2}\over 2} $$
which will be rendered without numbering, as shown below:
$$\nonumber\sum_{i=0}^n i = {{n^2}\over 2} $$
Why do we want a display expression numbered? The main reason is that we need to refer to the math expression within the context so that it is easy to tell which math expression, formula or equation we are talking about. Because numbers for numbered math expressions are automatically assigned by the system in order, and the number previously assigned to an expression will change if a new numbered expression is added before it within the same document, it is necesssary to give a unique name to each numbered display math expression so that the number attached to a math expression can be reliably and correctly retrieved with the unique name. In \(\LaTeX\) this is done by adding a \\label{ref_name} command to the expression, as shown in the following code:
$$x+1\over\sqrt{1-x^2}\label{num1}$$
will produce a numbered equation as
$$x+1\over\sqrt{1-x^2}\label{num1}$$
which can be referred as expression No.\ref{num1}
There are two ways to refer a display math expression. One is to use \\ref{...} defined in the LaTeX kernel, whereas the other is to use \\eqref{...} which is defined in the amsmath extension. The difference is that the latter will automatically add parentheses around the reference, whereas the former will only display the referred number. If you want the number to be in a parentheses or squared brackets you will have to add that explicitly, as shown in the example below:
Both [\ref{ref2}] and \eqref{ref2} can be used to refer to the same equation
which will be rendered as
Both [\ref{ref2}] and \eqref{ref2} can be used to refer to the same equation
$$x+1\over\sqrt[\leftroot{5}\uproot{5} n]{1-x^2}\label{ref2}$$
You may have noted that a referred math expression may appear after where it is referred. This is called a forward reference. You may safely ignore the jargon. However,you must make sure that the referred label must defined somewhere within the context, and the label must be unique. Otherwise, no right reference number will show up, as shown in the following example.
You may use equation \eqref(ref9) to solve the problem.
which will be rendered as
You may use equation \eqref{ref9} to solve the problem.
Please note the triple question marks appeared within the parentheses, instead of a number. It is because
label ref9 nowhere is defined.
Vertically aligning multiple-line expression
When an expression runs across multiple-line, most time it is desirable to make the lines aligned as desired somehow. This done by using the \\begin{align}...\\end{align} and & and \cr command, as shown below:
\begin{align}
a&=2\times b\label{ref3}\cr
&=c+d
\end{align}
which will be rendered as
\begin{align}
a&=2\times b\label{ref3}\cr
&=c+d
\end{align}
There is also a starred version of align environment as \\begin{align*}...\\end{align*}}. Same as equation*
, expressions within starred align
environment will not be labelled, as shown in the following example.
\begin{align*}
a&=2\times b\label{ref3}\cr
&=c+d
\end{align*}
which will be rendered as:
\begin{align*} a&=2\times b\cr &=c+d \end{align*}
In the two examples above, a <span class="inlinecode">\cr</span> command breaks a line, whereas an
ampersand (&) symbols tell where all the lines should align.
<p>
Here is another example:
</p>
<pre>
The area A of a circle with radius R is as follows: <br>
\begin{equation} \label{eq1}
\begin{split}
A & = \frac{\pi r^2}{2} \\
& = \frac{1}{2} \pi r^2
\end{split}
\end{equation}
</pre>
which will be rendered as:
<div class="quotation "> <br>
The area A of a circle with radius R is as follows: <br>
\begin{equation} \label{eq1}
\begin{split}
A & = \frac{\pi r^2}{2} \\
& = \frac{1}{2} \pi r^2
\end{split}
\end{equation}
</div>
The next example shows how multiple-column can be aligned using the <span class="inlinecode">align</span> or
<span class="inlinecode">align*</span> environment:
<pre>
\begin{align*}
d&=2r & P &=2\pi r & A&=\frac{1}{2}\pi r^2\\
C^2&=A^2+B^2 & c^n&=a^n+b^n & ax^2+bx+c&=0\\
y&=ax+b & y&=ax^2+bx+c & y&=\frac{1}{x}
\end{align*}
</pre>
<div class="quotation">
\begin{align*}
d&=2r & P &=2\pi r & A&=\frac{1}{2}\pi r^2\\
C^2&=A^2+B^2 & c^n&=a^n+b^n & ax^2+bx+c&=0\\
y&=ax+b & y&=ax^2+bx+c & y&=\frac{1}{x}
\end{align*}
</div>
<h3> Grouping </h3>
For the math expressions to be rendered correctly by web browsers, the commands presented must be not only
correct, they must be clear without any ambiguity as well. In most cases, ambiguity occurs when the
presented commands can be interpreted differently. When there is ambiguity, the web browser, the MathJax
engine behind more precisely will not be able to render the expression, but display an error message
instead. The following is an example:
$$ a+3 \over b\times{5} \over c\div{7} $$
<p>
which is the result of the code below:
</p>
<pre>
$$ a+3 \over b\times{5} \over c\div{7} $$
</pre>
<p>
because it can be interpreted as <span class="inlinecode">{a+3}</span> over <span class="inlinecode">
b\times{5} \over c\div{7}</span>, or <span class="inlinecode">a+3 \over b\times{5}</span> over
<span class="inlinecode">c\div{7}</span>
</p>
To make it clear and avoid ambiguity, we need to use curly braces <span class="inlinecode">{...}</span> to
group certain items of an expression. In the case above, we can put all the items to be denominator or
numerator inside a curly braces as a group, as shown below:
<pre>
$$ a+3 \over {b\times{5} \over c\div{7}} $$
</pre>
which will be rendered as
$$ a+3 \over {b\times{5} \over c\div{7}} $$
<p>
If you actually want <span class="inlinecode">a+3 \over b\times{5}</span> over
<span class="inlinecode">c\div{7}</span>, the expression should be grouped as follows:
</p>
<pre>
$$ {a+3 \over b\times{5}} \over c\div{7} $$
</pre>
<p>
which will be rendered as
</p>
$$ {a+3 \over b\times{5}} \over c\div{7} $$
All examples above are about grouping items within a math expression. If you want to group some math
expressions together to display, using the <span class="inlinecode">\\begin{gather} ... \\end{gather}</span>
or <span class="inlinecode">\\begin{gather*} ... \\end{gather*}</span>. The following example shows two
version of well-known Euler formula. Formula #\ref{euler0} is the original one while Formula #\ref{euler1}
is derived from the first when \(x=\pi\):
<pre>
\begin{gather}
e^{i\,x} = \cos\,x + i\,\sin\,x\label{euler0} \\
e^{i\pi} + 1= 0\label{euler1}
\end{gather}
</pre>
which will be rendered as:
<div class="quotation">
\begin{gather}
e^{i\,x} = \cos\,x + i\,\sin\,x\label{euler0} \\
e^{i\pi} + 1= 0\label{euler1}
\end{gather}
</div>
<h3 id="spaces">Spacing</h3>
<p>
Sometimes we want to change spaces between items within a math expression, either adding more spaces or
making
the items stay tighter. The following are the commands for this purpose.
</p>
<div class="container">
<table class="centered">
<thead>
<tr>
<th>Name</th>
<th>\(\LaTeX\) Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>Negative space</td>
<td><span class="inlinecode">\!</span></td>
</tr>
<tr>
<td>Thinnest space</td>
<td><span class="inlinecode">\,</span></td>
</tr>
<tr>
<td>Thin space</td>
<td><span class="inlinecode">\:</span></td>
</tr>
<tr>
<td>Medium space</td>
<td><span class="inlinecode">\;</span></td>
</tr>
<tr>
<td>1em space</td>
<td><span class="inlinecode">\quad</span></td>
</tr>
<tr>
<td>2em space</td>
<td><span class="inlinecode">\qquad</span></td>
</tr>
</tbody>
</table>
</div>
<p>
In the examples given in the previous section, spacing command <span class="inlinecode">\\,</span> has
been used two to add spaces.
</p>
<p>
In later sections, we will show more examples where grouping is needed.
</p>
<h2 class="mainheading"> LaTeX commands explained</h2>
In the section above, we have learned the basics of writing math expressions for web presentation, including
how to write inline math expressions and display math expressions, how to label and refer math
expressions, and how to align multiple-line expressions. In this section, we will explain how to present
math expressions involving various types of math operations.
<p>
Mathematical expressions are made of numbers, constants such as \(\pi, i, e\), variables and operators.
We will begin by explaining how to present/typeset numbers, constants, and variables in mathematical
expressions.
</p>
<h3> Numbers, Constants, and Variables in Math Expression </h3>
<p>
Most people writing learning materials in math and science should befamiliar with the numbers used in
math and science expressions. For integers and real numbers, one may use the numbers directly in a form
they are already used to, such as \(198 -\!36\,\), \(1.25 +\!3.78\,\). Please note that in the two
inline math expressions spacing commands we discussed in previous section are used to adjust the spaces
between items of the expression.
</p>
<p>
For numbers in scientific notation such as \(5.12 \cdot 10^3\), specific \(\LaTeX\) command <span
class="inlinecode">\\cdot</span> for multiplication, and notation <span class="inlinecode"> ^
</span> for superscript or exponentiation of math need to be used to make proper rendering. The code for
the
scientific number in the pagraph above is <span class="inlinecode">\\(5.12 \cdot 10^3\\) </span>, for
example.
</p>
<p>
The coding for constant \(\pi\), for \(3.1415926\) is <span class="inlinecoding">\\(\pi\\)</span>,
whereas for contants \(e\), for \(2.71828182\) and \(i\), for \(\sqrt{-1}\), you can simply use letter
<span class="inlinecoding"> e </span> and <span class="inlinecoding">i</span> as needed.
</p>
<p>
Different from variables in computer programs, variables in math and science are single letters such as
\(x, y, z\), or single letters with subscripts such as \(x_1, y_i, z_{jk}\).
</p>
Other than letters in English or one's native language, Greek letters are commonly used in math expressions.
Hence, it is important to know how to present them.
<p>
LaTeX has a command for each and every Greek letter. The following table shows commands for lowercase
Greek letters.
<table class="border-1 padding-5 centered">
<thead>
<th>
Command
</th>
<th>
Letter
</th>
<th>
Command
</th>
<th>
letter
</th>
<th>
Command
</th>
<th>
letter
</th>
</thead>
<tbody>
<tr class="border-1 padding-5">
<td><span class="inlinecode"> \\alpha </span></td>
<td> \(\alpha\) </td>
<td>
<span class="inlinecode"> \\beta </span>
</td>
<td>
\(\beta \)
</td>
<td>
<span class="inlinecode"> \\gamma</span>
</td>
<td>
\(\gamma\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> \\delta </span>
</td>
<td>
\(\delta \)
</td>
<td>
<span class="inlinecode"> \\epsilon </span>
</td>
<td>
\(\epsilon \)
</td>
<td>
<span class="inlinecode"> \\varepsilon</span>
</td>
<td>
\(\varepsilon\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> \\zeta </span>
</td>
<td>
\( \zeta \)
</td>
<td>
<span class="inlinecode"> \\eta </span>
</td>
<td>
\(\eta \)
</td>
<td>
<span class="inlinecode"> \\theta</span>
</td>
<td>
\(\theta\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> \\vartheta </span>
</td>
<td>
\(\vartheta \)
</td>
<td>
<span class="inlinecode"> \\iota </span>
</td>
<td>
\(\iota \)
</td>
<td>
<span class="inlinecode"> \\kappa</span>
</td>
<td>
\(\kappa\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> \\lambda </span>
</td>
<td>
\(\lambda \)
</td>
<td>
<span class="inlinecode"> \\mu </span>
</td>
<td>
\(\mu \)
</td>
<td>
<span class="inlinecode"> \\nu</span>
</td>
<td>
\(\nu\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> \\xi </span>
</td>
<td>
\(\xi \)
</td>
<td>
<span class="inlinecode"> \\pi </span>
</td>
<td>
\(\pi \)
</td>
<td>
<span class="inlinecode"> \\varpi</span>
</td>
<td>
\(\varpi\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> \\rho </span>
</td>
<td>
\(\rho \)
</td>
<td>
<span class="inlinecode"> \\varrho </span>
</td>
<td>
\(\varrho \)
</td>
<td>
<span class="inlinecode"> \\sigma</span>
</td>
<td>
\(\sigma\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> \\tau </span>
</td>
<td>
\(\tau \)
</td>
<td>
<span class="inlinecode"> \\upsilon </span>
</td>
<td>
\(\upsilon \)
</td>
<td>
<span class="inlinecode"> \\phi</span>
</td>
<td>
\(\phi\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> \\varphi </span>
</td>
<td>
\(\varphi \)
</td>
<td>
<span class="inlinecode"> \\chi </span>
</td>
<td>
\(\chi \)
</td>
<td>
<span class="inlinecode"> \\psi</span>
</td>
<td>
\(\psi\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> \\omega </span>
</td>
<td>
\( \omega \)
</td>
<td></td>
<td></td>
</tr>
</tbody>
<th>
</th>
</table>
</p>
<p>
The following table is a list of uppercase Greek letters. Please note that some uppercase Greek letters
are the same as in English, and some Greek letters are different in lowercase but the same in uppercase.
</p>
<table class="border-1 padding-5 centered">
<thead>
<th>
Command
</th>
<th>
Letter
</th>
<th>
Command
</th>
<th>
letter
</th>
<th>
Command
</th>
<th>
letter
</th>
</thead>
<tbody>
<tr class="border-1 padding-5">
<td><span class="inlinecode"> A </span></td>
<td> \(A\) </td>
<td>
<span class="inlinecode"> B </span>
</td>
<td>
\(B \)
</td>
<td>
<span class="inlinecode"> \\Gamma</span>
</td>
<td>
\(\Gamma\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> \\Delta </span>
</td>
<td>
\(\Delta \)
</td>
<td>
<span class="inlinecode"> E </span>
</td>
<td>
\(E \)
</td>
<td>
<span class="inlinecode"> E</span>
</td>
<td>
\(E\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> Z </span>
</td>
<td>
\( Z \)
</td>
<td>
<span class="inlinecode"> H </span>
</td>
<td>
\(H \)
</td>
<td>
<span class="inlinecode"> \\Theta</span>
</td>
<td>
\(\Theta\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> \\Theta </span>
</td>
<td>
\(\Theta \)
</td>
<td>
<span class="inlinecode"> I </span>
</td>
<td>
\(I \)
</td>
<td>
<span class="inlinecode"> K</span>
</td>
<td>
\(K\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> \\Lambda </span>
</td>
<td>
\(\Lambda \)
</td>
<td>
<span class="inlinecode"> M </span>
</td>
<td>
\(M \)
</td>
<td>
<span class="inlinecode"> N</span>
</td>
<td>
\(N\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> \\Xi </span>
</td>
<td>
\(\Xi \)
</td>
<td>
<span class="inlinecode"> \\Pi </span>
</td>
<td>
\(\Pi \)
</td>
<td>
<span class="inlinecode"> \\Phi</span>
</td>
<td>
\(\Phi\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> P </span>
</td>
<td>
\(P \)
</td>
<td>
<span class="inlinecode"> P </span>
</td>
<td>
\(P \)
</td>
<td>
<span class="inlinecode"> \\Sigma</span>
</td>
<td>
\(\Sigma\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> \\Tau </span>
</td>
<td>
\(\tau \)
</td>
<td>
<span class="inlinecode"> \\Upsilon </span>
</td>
<td>
\(\Upsilon \)
</td>
<td>
<span class="inlinecode"> \\Phi</span>
</td>
<td>
\(\Phi\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> \\Phi </span>
</td>
<td>
\(\Phi \)
</td>
<td>
<span class="inlinecode"> X </span>
</td>
<td>
\(X \)
</td>
<td>
<span class="inlinecode"> \\Psi</span>
</td>
<td>
\(\Psi\)
</td>
</tr>
<tr>
<td>
<span class="inlinecode"> \\Omega </span>
</td>
<td>
\( \Omega \)
</td>
<td></td>
<td></td>
</tr>
</tbody>
<th>
</th>
</table>
In next three subsections, we will discuss how to present various mathematical operators in math
expressions.
<h3> Math operators for addition, subtraction, multiplication and division </h3>
<p>
The fundamental math operations include addition, subtraction, mutiplication, and division. We use <span
class="inlinecode"> + </span> for addition and use
<span class="inlinecode"> - </span> for sutraction. For multiplication, there are three ways to present.
<ol>
<li>
when two vairables or one variable and one number are next to each other with nothing in between, it
implies multiplication between the two. For example in formula for calculating area of a circle
below:
\[
A = {\pi r^2 \over 2} = \frac{1}{2}\pi r^2
\]
</li>
<li>
If we want to explicitly show multiplication in a traditional manner, <span class="inlinecode">
\\(\times\)</span> can be used to add \(\times\), such as \(P = 2\times\pi\times R\) for
circumference
of a circle,
</li>
<li>
Sometimes, such as in scientific notation of numbers we previously discussed, \(\cdot\)
is used for multiplication. A <span class="inlinecode">\\cdot</span>command can be used to add a
perfect dot for multiplication, as shown in the following example:
<br>
<pre>
\[
A = {\pi\cdot r^2 \over 2} = \frac{1}{2}\cdot\pi\cdot r^2
\]
</pre>
which will be rendered as
\[
A = {\pi\cdot r^2 \over 2} = \frac{1}{2}\cdot\pi\cdot r^2
\]
</li>
</ol>
For divisions, there are also three ways to represent: <span class="inlinecode"> / </span>, or <span
class="inlinecode">\\div</span> or fraction. The following example shows how to use the first two ways
to present division.
<pre>
$$ a+b/\!c-d\times 5\div 6 $$
which will be rendered as $$ a+b/!c-d\times 5\div 6 $$
<h3> Fractions </h3>
Fractions are often important components of math expressions. There are two ways to present fractions. one
is to use the <span class="inlinecode">\frac{...}{...}</span> command, while the other is to use <span
class="inlinecode">{ <subformula1> \\over <subformula2> }</span> command. The latter is often
used in presenting more complicated fractions, where either the numerator or the denominator or both are
long and complex.
<p>
Here are some examples using <span class="inlinecode">\frac{...}{...}</span> command:
</p>
<pre>
$$ \frac{a+b}{c+d} = \frac{b+a}{c+d} $$
$$ \frac{a+b}{c+d} = \frac{b+a}{d+c} $$
which will be rendered as
<div class="quotation">
$$ \frac{a+b}{c+d} = \frac{b+a}{c+d} $$
$$ \frac{a+b}{c+d} = \frac{b+a}{d+c} $$
</div>
<p>
As can be seen, everything inside first curly braces will be the numerator of the fraction, whereas
everything inside the second curly braces will be the denominator of the fraction.
</p>
<p>
The following are the same fractions presented using <span class="inlinecode">{... \over ...}</span>
command, where inside the pair of curly braces everything on the left side of <span
class="inlinecode">\over</span> will be taken as nominator whereas everything on the right will be
taken as denominator of the fraction:</p>
<pre>
$$ {a+b\over c+d} = {b+a\over c+d} $$
$$ {a+b\over c+d} = {b+a\over d+c} $$
</pre>
which will have the same result:
<div class="quotation">
$$ {a+b\over c+d} = {{b+a}\over{c+d}} $$
$$ {a+b\over c+d} = {b+a\over d+c} $$
</div>
Please pay attention to the curly braces used in the examples above. In \(LaTeX\), curly braces are used for
grouping items in a math expression to avoid ambiguity, which will be explained in detail in the next
section. In the above examples, a pair of curly braces is either used to clearly tell where the numerator
starts and where the denominator ends.
<h3>
Superscripts as notation of exponentiation
</h3>
In general typesetting subscriptions and superscriptions are used very often. We have seen previously how
subscriptions are used to name variables in math expressions. Superscriptions, however, are used as
notations of exponentiations in math expressions. In LaTeX typesetting system, caret (^) is used to notate
superscripts. The following is an example.
\[
b_0\times\hspace{-0.15cm}{2^0}, b_1\times\hspace{-0.15cm}{2^1}, b_2\times\hspace{-0.15cm}{2^2}, ...,
b_n\times\hspace{-0.15cm}{2^n}
\]
With exponentiation, Einstein theory of mass and energy can be presented with
<pre>
$$E = mc^2$$
</pre>
which will be rendered beautifully as
$$E = mc^2$$
<p>
and, the famous Fermat's Last Theorem can be presented with
<pre>
$$ a^n + b^n = c^n $$
</pre>
which will be rendered as
$$ a^n + b^n = c^n $$
</p>
<p>
As a special case when \( n=2 \), the equation
$$ a^2 + b^2 = c^2 $$
defines all Pythagorean triples \( (a, b, c) \), where \( a, b, c\) are all positive integers such that
\( a^2 + b^2 = c^2 \).
</p>
<h3 id="dots">Dots</h3>
In math expressions, there are different dots fore different purposes. We have seen in previous section that
how a signle dot \(\cdot\) is ued to represent multiplication. There are also three centered dots, three
baseline dots, three diagonal dots and three vertical dots, which are used for ellipsis in different
occasions. The following table provides a sumamry of these dots commands:
<br><br>
<div class="container centered">
<table class="border-1 padding-5 centered">
<thead>
<tr>
<th>Name</th>
<th>Rendered</th>
<th>\(\LaTeX\) Code</th>
<th>Used for</th>
</tr>
</thead>
<tbody>
<tr>
<td>Multiplication dot</td>
<td>\(\cdot\)</td>
<td><span class="inlinecode">\cdot</span></td>
<td>Multiplication</td>
</tr>
<tr>
<td>Three baseline dots</td>
<td>\(\ldots\)</td>
<td><span class="inlinecode">\ldots</span></td>
<td>General inline ellipsis</td>
</tr>
<tr>
<td>Three centered dots</td>
<td>\(\cdots\)</td>
<td><span class="inlinecode">\cdots</span></td>
<td>Ellipsis in horizontal direction</td>
</tr>
<tr>
<td>Three vertical dots</td>
<td>\(\vdots\)</td>
<td><span class="inlinecode">\vdots</span></td>
<td>Ellipsis in vertical direction</td>
</tr>
<tr>
<td>Three diagonal dots</td>
<td>\(\ddots\)</td>
<td><span class="inlinecode">\ddots</span></td>
<td>Ellipsis in diagonal direction</td>
</tr>
</tbody>
</table>
</div>
<h3 id="operators">Function names as Operators</h3>
<p>
Rather than being used as functions, in form of f(x), many commonly used math functions are used as
operator in form of \(fx\) in mathematical expressions. The following table shows most of these
functions used as operators in mathematical expressions.
<table class="border-1 padding-5 centered">
<tr>
<th> \(\LaTeX\) code</th>
<th>Rendered</th>
</tr>
<tr>
<td> \sin x</td>
<td> \(\sin x\) </td>
</tr>
<tr>
<td>\cos x </td>
<td> \(\cos x\) </td>
</tr>
<tr>
<td>\arcsin x</td>
<td> \(\arcsin x\) </td>
</tr>
<tr>
<td>\arccos x </td>
<td> \(\arccos x\) </td>
</tr>
<tr>
<td>\sinh x </td>
<td> \(\sinh x\) </td>
</tr>
<tr>
<td>\cosh x </td>
<td> \(\cosh x\) </td>
</tr>
<tr>
<td>\tan x </td>
<td> \(\tan x\) </td>
</tr>
<tr>
<td>\arctan x </td>
<td> \(\arctan x\) </td>
</tr>
<tr>
<td>\log x </td>
<td> \(\log x\) </td>
</tr>
<tr>
<td>\ln x </td>
<td> \(\ln x\) </td>
</tr>
<tr>
<td>\max x </td>
<td> \(\max x\) </td>
</tr>
<tr>
<td>\min x </td>
<td> \(\min x\) </td>
</tr>
<tr>
<td>\sup x </td>
<td> \(\sup x\) </td>
</tr>
<tr>
<td>\inf x </td>
<td> \(\inf x\) </td>
</tr>
<tr>
<td>\tanh x</td>
<td> \(\tanh x\) </td>
</tr>
<tr>
<td>\det x </td>
<td> \(\det x\) </td>
</tr>
<tr>
<td>\csc x </td>
<td> \(\csc x\) </td>
</tr>
<tr>
<td>\sec x </td>
<td> \(\sec x\) </td>
</tr>
<tr>
<td>\cot x</td>
<td> \(\cot x\) </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<h3 id="big-operators">Special mathematical operators</h3>
In mathematics there are several special operators for little bigger operations such as integration of a
function, summation of a sequence of numbers, multiplication of a sequence of numbers, and limit of a
sequence, as shown in the table below.
<br><br>
<div class="container">
<table class="center border-1 padding-5">
<thead>
<tr>
<th>Rendered</th>
<th>\(\LaTeX\) Code</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>\(\displaystyle \int_{a}^{b}\)</td>
<td><span class="inlinecode">\int_{a}^{b}</span></td>
<td>Integration</td>
</tr>
<tr>
<td>\(\displaystyle \sum_{k=0}^{n}\)</td>
<td><span class="inlinecode">\sum_{k=0}^{n}</span></td>
<td>Summation of sequence</td>
</tr>
<tr>
<td>\(\displaystyle \prod_{k=0}^{n}\)</td>
<td><span class="inlinecode">\prod_{k=0}^{n}</span></td>
<td>Multiplication of sequence</td>
</tr>
<tr>
<td>\(\displaystyle \lim_{x \to 0}\)</td>
<td><span class="inlinecode">\lim_{x \to 0}</span></td>
<td>Limit of sequence </td>
</tr>
</tbody>
</table>
<h3> Integrals, multiple integrals</h3>
In the section above we have seen integral operation as a big operator. Since integral is used so often
in math and science, and may appear in multiple forms, it is worth giving it a special treatment in the
subsection.
<p> As mentioned in previous subsection, a simple integral operation can be presented using the <span
class="inlinecode"> \\int_{lower}^{upper} </span> command.
For single variable integral, the command will be <span class="inlinecode"> \\int_{lower}^{upper}
f(x)dx </span>. The following is a single variable integral expression:
</p>
\[ \int_{a}^{b} x^2 \,dx \]
<p>
For two-variable integrals, use <span class="inlinecode"> \\int_{lower}^{upper}\\int_{lower}^{upper}
f(x,y) dxdy</span> command, as shown in the following example:
<pre>
\[ \int_{a}^{b}\int_{c}^{d} \mu{x,y} \,dx\,dy \]
</pre>
which will be rendered as
\[ \int_{a}^{b}\int_{c}^{d} \mu(x,y) \,dx\,dy \]
</p>
<p>
Similarly, multiple-variable integrals can be presented, if lower-bounds and upper-bounds are known
for all varialbles. Otherwise, The following shortcuts for mutiple-variable integrals <span
class="inlinecode"> \\iinit_V, \\iiinit_V, \\iiiinit_V ... \\idotsint_V </span> need to be used,
as shown in the examples below:
</p>
<pre>
\[\iint_V \mu(u,v) \,du\,dv \]
\[\iiint_V \mu(u,v,w) \,du\,dv\,dw \]
\[\iiiint_V \mu(t,u,v,w) \,dt\,du\,dv\,dw \]
\[\idotsint_V \mu(u_1,\dots,u_k) \,du_1 \dots du_k \]
</pre>
which will rendered respectively as:
\[\iint_V \mu(u,v) \,du\,dv \]
\[\iiint_V \mu(u,v,w) \,du\,dv\,dw \]
\[\iiiint_V \mu(t,u,v,w) \,dt\,du\,dv\,dw \]
\[\idotsint_V \mu(u_1,\dots,u_k) \,du_1 \dots du_k \]
</div>
<h3 id="modulo">Modulo operators</h3>
In math expressions, especially those in number theory, modulo operations are very common. There are three
important modulo operators: \(\bmod, \pmod, \equiv\) presented using <span class="inlinecode">\\bmod,
\\pmod, \\equiv</span> respectively, as shummarised in the table below:
<br><br>
<div class="container">
<table class="center border-1 padding-5">
<thead>
<tr>
<th>Rendered</th>
<th>\(\LaTeX\) Code</th>
<th>Meaning</th>
</tr>
</thead>
<tbody>
<tr>
<td>\(a \bmod b\)</td>
<td><span class="inlinecode">a \bmod b</span></td>
<td>The remainder of integer a divided by integer b</td>
</tr>
<tr>
<td>\(a \equiv b \pmod{m}\)</td>
<td><span class="inlinecode">a \equiv b \pmod{m}</span></td>
<td> integer \(a\) and \(b\) have the same remainder when divided by the same \(m\)</td>
</tr>
</tbody>
</table>
</div>
<h3 id="absolute-value-and-norm">Absolute value and norm</h3>
<div class="container">
<table class="center border-1 padding-5">
<thead>
<tr>
<th>Rendered</th>
<th>\(\LaTeX\) Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>\(\lvert x \rvert\)</td>
<td><span class="inlinecode">\lvert x \rvert</span></td>
</tr>
<tr>
<td>\(\lVert x \rVert\)</td>
<td><span class="inlinecode">\lVert x \rVert</span></td>
</tr>
</tbody>
</table>
</div>
<h3 id="arrows">Arrows</h3>
<div class="container">
<table class="center border-1 padding-5">
<thead>
<tr>
<th>Rendered</th>
<th>\(\LaTeX\) Code</th>
<th>Rendered</th>
<th>\(\LaTeX\) Code</th>
<th>Rendered</th>
<th>\(\LaTeX\) Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>\(\uparrow\)</td>
<td><span class="inlinecode">\uparrow</span></td>
<td>\(\downarrow\)</td>
<td><span class="inlinecode">\downarrow</span></td>
<td>\(\updownarrow\)</td>
<td><span class="inlinecode">\updownarrow</span></td>
</tr>
<tr>
<td>\(\Uparrow\)</td>
<td><span class="inlinecode">\Uparrow</span></td>
<td>\(\Downarrow\)</td>
<td><span class="inlinecode">\Downarrow</span></td>
<td>\(\Updownarrow\)</td>
<td><span class="inlinecode">\Updownarrow</span></td>
</tr>
<tr>
<td>\(\leftarrow\)</td>
<td><span class="inlinecode">\leftarrow</span> or <span class="inlinecode">\gets</span></td>
<td>\(\rightarrow\)</td>
<td><span class="inlinecode">\rightarrow</span> or <span class="inlinecode">\to</span></td>
<td>\(\leftrightarrow\)</td>
<td><span class="inlinecode">\leftrightarrow</span></td>
</tr>
<tr>
<td>\(\Leftarrow\)</td>
<td><span class="inlinecode">\Leftarrow</span></td>
<td>\(\Rightarrow\)</td>
<td><span class="inlinecode">\Rightarrow</span></td>
<td>\(\Leftrightarrow\)</td>
<td><span class="inlinecode">\Leftrightarrow</span></td>
</tr>
<tr>
<td>\(\mapsto\)</td>
<td><span class="inlinecode">\mapsto</span></td>
<td>\(\longleftarrow\)</td>
<td><span class="inlinecode">\longleftarrow</span></td>
<td>\(\longrightarrow\)</td>
<td><span class="inlinecode">\longrightarrow</span></td>
</tr>
<tr>
<td>\(\longleftrightarrow\)</td>
<td><span class="inlinecode">\longleftrightarrow</span></td>
<td>\(\Longleftarrow\)</td>
<td><span class="inlinecode">\Longleftarrow</span></td>
<td>\(\Longrightarrow\)</td>
<td><span class="inlinecode">\Longrightarrow</span></td>
</tr>
<tr>
<td>\(\Longleftrightarrow\)</td>
<td><span class="inlinecode">\Longleftrightarrow</span></td>
<td>\(\longmapsto\)</td>
<td><span class="inlinecode">\longmapsto</span></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<h3 id="binary-relations">Binary relations</h3>
<div class="container">
<table class="center border-1 padding-5">
<thead>
<tr>
<th>Rendered</th>
<th>\(\LaTeX\) Code</th>
<th>Rendered</th>
<th>\(\LaTeX\) Code</th>
<th>Rendered</th>
<th>\(\LaTeX\) Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>\(\ne\)</td>
<td><span class="inlinecode">\ne</span></td>
<td>\(\le\)</td>
<td><span class="inlinecode">\le</span></td>
<td>\(\ge\)</td>
<td><span class="inlinecode">\ge</span></td>
</tr>
<tr>
<td>\(\equiv\)</td>
<td><span class="inlinecode">\equiv</span></td>
<td>\(\ll\)</td>
<td><span class="inlinecode">\ll</span></td>
<td>\(\gg\)</td>
<td><span class="inlinecode">\gg</span></td>
</tr>
<tr>
<td>\(\doteq\)</td>
<td><span class="inlinecode">\doteq</span></td>
<td>\(\sim\)</td>
<td><span class="inlinecode">\sim</span></td>
<td>\(\simeq\)</td>
<td><span class="inlinecode">\simeq</span></td>
</tr>
<tr>
<td>\(\subset\)</td>
<td><span class="inlinecode">\subset</span></td>
<td>\(\supset\)</td>
<td><span class="inlinecode">\supset</span></td>
<td>\(\approx\)</td>
<td><span class="inlinecode">\approx</span></td>
</tr>
<tr>
<td>\(\subseteq\)</td>
<td><span class="inlinecode">\subseteq</span></td>
<td>\(\supseteq\)</td>
<td><span class="inlinecode">\supseteq</span></td>
<td>\(\cong\)</td>
<td><span class="inlinecode">\cong</span></td>
</tr>
<tr>
<td>\(\in\)</td>
<td><span class="inlinecode">\in</span></td>
<td>\(\ni\)</td>
<td><span class="inlinecode">\ni</span></td>
<td>\(\propto\)</td>
<td><span class="inlinecode">\propto</span></td>
</tr>
<tr>
<td>\(\mid\)</td>
<td><span class="inlinecode">\mid</span></td>
<td>\(\parallel\)</td>
<td><span class="inlinecode">\parallel</span></td>
<td>\(\perp\)</td>
<td><span class="inlinecode">\perp</span></td>
</tr>
</tbody>
</table>
</div>
<h3 id="binary-operators">Binary operators</h3>
<div class="container">
<table class="center border-1 padding-5">
<thead>
<tr>
<th>Rendered</th>
<th>\(\LaTeX\) Code</th>
<th>Rendered</th>
<th>\(\LaTeX\) Code</th>
<th>Rendered</th>
<th>\(\LaTeX\) Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>\(\pm\)</td>
<td><span class="inlinecode">\pm</span></td>
<td>\(\mp\)</td>
<td><span class="inlinecode">\mp</span></td>
<td>\(\cdot\)</td>
<td><span class="inlinecode">\cdot</span></td>
</tr>
<tr>
<td>\(\div\)</td>
<td><span class="inlinecode">\div</span></td>
<td>\(\times\)</td>
<td><span class="inlinecode">\times</span></td>
<td>\(\setminus\)</td>
<td><span class="inlinecode">\setminus</span></td>
</tr>
<tr>
<td>\(\star\)</td>
<td><span class="inlinecode">\star</span></td>
<td>\(\cup\)</td>
<td><span class="inlinecode">\cup</span></td>
<td>\(\cap\)</td>
<td><span class="inlinecode">\cap</span></td>
</tr>
<tr>
<td>\(\ast\)</td>
<td><span class="inlinecode">\ast</span></td>
<td>\(\circ\)</td>
<td><span class="inlinecode">\circ</span></td>
<td>\(\bullet\)</td>
<td><span class="inlinecode">\bullet</span></td>
</tr>
<tr>
<td>\(\oplus\)</td>
<td><span class="inlinecode">\oplus</span></td>
<td>\(\ominus\)</td>
<td><span class="inlinecode">\ominus</span></td>
<td>\(\odot\)</td>
<td><span class="inlinecode">\odot</span></td>
</tr>
<tr>
<td>\(\oslash\)</td>
<td><span class="inlinecode">\oslash</span></td>
<td>\(\otimes\)</td>
<td><span class="inlinecode">\otimes</span></td>
<td>\(\smallsetminus\)</td>
<td><span class="inlinecode">\smallsetminus</span></td>
</tr>
</tbody>
</table>
</div>
<h3 id="logic-symbols">Logic symbols</h3>
<div class="container">
<table class="center border-1 padding-5">
<thead>
<tr>
<th>Rendered</th>
<th>\(\LaTeX\) Code</th>
<th>Rendered</th>
<th>\(\LaTeX\) Code</th>
<th>Rendered</th>
<th>\(\LaTeX\) Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>\(\lor\)</td>
<td><span class="inlinecode">\lor</span></td>
<td>\(\land\)</td>
<td><span class="inlinecode">\land</span></td>
<td>\(\neg\)</td>
<td><span class="inlinecode">\neg</span></td>
</tr>
<tr>
<td>\(\exists\)</td>
<td><span class="inlinecode">\exists</span></td>
<td>\(\nexists\)</td>
<td><span class="inlinecode">\nexists</span></td>
<td>\(\forall\)</td>
<td><span class="inlinecode">\forall</span></td>
</tr>
<tr>
<td>\(\implies\)</td>
<td><span class="inlinecode">\implies</span></td>
<td>\(\iff\)</td>
<td><span class="inlinecode">\iff</span></td>
<td>\(\models\)</td>
<td><span class="inlinecode">\models</span></td>
</tr>
</tbody>
</table>
</div>
<h3 id="other-symbols">Special math symbols</h3>
<div class="container">
<table class="center border-1 padding-5">
<thead>
<tr>
<th>Symbol</th>
<th>Rendered</th>
<th>\(\LaTeX\) Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>Infinity</td>
<td>\(\infty\)</td>
<td><span class="inlinecode">\infty</span></td>
</tr>
<tr>
<td>Partial derivative</td>
<td>\(\partial\)</td>
<td><span class="inlinecode">\partial</span></td>
</tr>
<tr>
<td>Empty set</td>
<td>\(\emptyset\)</td>
<td><span class="inlinecode">\emptyset</span></td>
</tr>
<tr>
<td>Nabla</td>
<td>\(\nabla\)</td>
<td><span class="inlinecode">\nabla</span></td>
</tr>
<tr>
<td>Angle brackets</td>
<td>\(\langle x \rangle\)</td>
<td><span class="inlinecode">\langle x \rangle</span></td>
</tr>
</tbody>
</table>
</div>
<h3 id="arrays">Arrays</h3>
<p>Array is a type of structure for organizing data. An array can be 1 dimension or n-dimension. To present
array with \(\LaTeX\), using the <span class="inlinecode">array</span> environment., as shown in the
following example, where <span class="inlinecode">\\\\</span> is used to separate rows, and <span
class="inlinecode">&</span> is used to separate elements of each row. To produce large
delimiters around the array, use <span class="inlinecode">\left</span> and
<span class="inlinecode">\right</span> followed by the desired delimiter.:
</p>
<pre>
\[\left(
\begin{array}{lcr}
a & b & c \\
1 & 2 & 3 \\
Apple & Pear & Orange
\end{array}
\right)\]
</pre>
<span>
\[\left(
\begin{array}{lcr}
a & b & c \\
1 & 2 & 3 \\
Apple & Pear & Orange
\end{array}
\right)\]
</span>
<p>Of the <span class="inlinecode">lcr</span> in the code above, each letter tells how elements in the
corresponding column should be aligned in accordance with the following</p>
<table class="center border-1 padding-5">
<tr>
<td><span class="inlinecode">l</span></td>
<td> left aligned text</td>
</tr>
<tr>
<td><span class="inlinecode">c</span> </td>
<td> centered text</td>
</tr>
<tr>
<td><span class="inlinecode">r</span></td>
<td> right aligned text</td>
</tr>
</table>
<h3 id="cases">Enumerate Cases</h3>
<p>In math and science it is often needed to enumerate cases when presenting expressions and formulas, such
as a mathematical function. In \(\LaTeX\) this is done by using the <span
class="inlinecode">cases</span>
environment, as hown in the following example, where <span class="inlinecode">\\\\</span> is used to
separate different cases, and <span class="inlinecode">&</span> is used for correct alignment.
</p>
<pre>
\[f(x) =
\begin{cases}
\sqrt{x} & \text{if } x > 0 \\
0 & \text{if } x = 0 \\
x^2+5 & \text{if } x < 0
\end{cases}\]
</pre>
which will be rendered as follows:
<div class="quotation">
\[f(x) =
\begin{cases}
\sqrt{x} & \text{if } x > 0 \\
0 & \text{if } x = 0 \\
x^2+5 & \text{if } x < 0
\end{cases}\]
</div>
<h3 id="matrices">Matrices</h3>
<p>In math and science, matrices are commonly used, and a matrix may be presented with different delimiter.
In \LaTeX, this is done by using one of the following environments.</p>
<table class="center border-1 padding-5">
<tr>
<td><span class="inlinecode">matrix</span></td>
<td> No delimiter</td>
</tr>
<tr>
<td><span class="inlinecode">pmatrix</span></td>
<td> \((...)\) as delimiter</td>
</tr>
<tr>
<td><span class="inlinecode">bmatrix</span></td>
<td> \([...]\) as delimiter</td>
</tr>
<tr>
<td><span class="inlinecode">Bmatrix</span></td>
<td> \(\{...\}\) as delimiter</td>
</tr>
<tr>
<td><span class="inlinecode">vmatrix</span></td>
<td> \(\lvert ... \lvert\) as delimiter</td>
</tr>
<tr>
<td><span class="inlinecode">Vmatrix</span></td>
<td> \(\lVert ... \lVert\) delimiter</td>
</tr>
</table class="center">
<p>Use <span class="inlinecode">\\\\</span> to separate different rows, and use <span
class="inlinecode">&</span> to separate elements of each row.
</p>
<pre>
\[\begin{bmatrix}
1 & 2 & 3 \\
4 & 5 & 6 \\
\end{bmatrix}\]
</pre>
<div class="quotation">
\[\begin{bmatrix}
1 & 2 & 3 \\
4 & 5 & 6 \\
\end{bmatrix}\]
</div>
<h3 id="vectors">Vectors</h3>
<p>In mathematics, vectors are special type of matrices where it has only one row, or one column, as shown
in the example below:
<pre>
\[\begin{bmatrix}
1 & 2 & 3 & 4 & 5 & 6
\end{bmatrix}\]
</pre>
which is rendered as a vector in a row.
<div class="quotation">
\[\begin{bmatrix}
1 & 2 & 3 & 4 & 5 & 6
\end{bmatrix}\]
</div>
The next exampe will render a vector but in a column.
<div class="quotation">
\[\begin{bmatrix}
1 \\
2 \\
3 \\
4 \\
5 \\
6 \\
\end{bmatrix}\]
</div>
A variable \(x\) referencing a vector is denoted as \(\vec{x}\), and the code to present \(\vec{x}\) is
<span class="inlinecode">\\(\\vec{x}\\)</span> </p>
<h2 class="mainheading">References</h2>
1. MathJax documentation, https://docs.mathjax.org/en/latest/