mathml

MathML is used to render mathematical formulas in webpages.

usage

For starters, you just need the <math> element which can be rendered in two forms: inline by default like $1 + 1$ or in its own block like

1 * 1

<math display="inline"><mn>1</mn><mo>+</mo><mn>1</mn></math>
<math display="block"><mn>1</mn><mo>*</mo><mn>1</mn></math>

In the following code samples, I’ll exclude <math> for brevity.

basics

Use <mn> for numbers
Use <mo> for operators
Use <mi> for identifiers like constants and variables
Use <ms> for string literals
Use <mrow> to group expressions

Example: $8 * (x + y)$

<mn>8</mn> <mo>*</mo>
<mrow>
  <mo>(</mo> <!-- note that parentheses are operators -->
  <mrow>
    <mi>x</mi> <mo>+</mo> <mi>y</mi>
  </mrow>
  <mo>)</mo>
</mrow>

composites

Here’s a list of composite elements. The syntax column contains the number and order of children allowed for each element. Fractions, for example, should only have two children. Make use of <mrow> for more complex nesting.

<mfrac>
  <!-- numerator -->
  <mrow>
    <mn>1</mn><mo>+</mo><mn>3</mn>
  </mrow>
  <!-- denominator -->
  <mn>16</mn>
</mfrac>

element	syntax	examples
`<mfrac>`	`numerator denominator`	$\frac{1 + 3}{16}$
`<msqrt>`	`base`	$\sqrt{16}$
`<mroot>`	`base index`	$\sqrt[3]{x}$
`<msub>`	`base subscript`	$x_{i}$
`<msup>`	`base superscript`	$x^{i}$
`<msubsup>`	`base subscript superscript`	$a_{b}^{c}$
`<munder>`	`base subscript`	$\underset{i}{x}$
`<mover>`	`base superscript`	$\overset{i}{x}$
`<munderover>`	`base subscript superscript`	$\sum_{i = 1}^{10}$

matrices

For matrices, you can use the <mtable>, <mtr>, and <mtd> elements which work like their respective HTML <table>, <tr>, and <td> counterparts.

[\begin{matrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{matrix}]

<mrow>
  <mo>[</mo>
  <mtable>
    <mtr>
      <mtd><mn>1</mn></mtd>
      <mtd><mn>2</mn></mtd>
      <mtd><mn>3</mn></mtd>
    </mtr>
    <mtr>
      <mtd><mn>4</mn></mtd>
      <mtd><mn>5</mn></mtd>
      <mtd><mn>6</mn></mtd>
    </mtr>
    <mtr>
      <mtd><mn>7</mn></mtd>
      <mtd><mn>8</mn></mtd>
      <mtd><mn>9</mn></mtd>
    </mtr>
  </mtable>
  <mo>]</mo>
</mrow>

rendering

Browsers, as always, render MathML differently. I remember now why I originally took down my formula-heavy worldbuilding notes. This page uses MathJax, a display engine that attempts to render MathML consistently across browsers (also supports ASCIIMath and LaTeX, but I haven’t tried these yet). However, even it doesn’t really work. View this page in Firefox and Vivaldi.

r_{H} \approx a (1 - e) * \sqrt[3]{m_{\oplus} / M_{\oplus}} * 235

MathJax places formulas in center alignment by default. Add this to a body script to change the alignment:

MathJax={chtml:{displayAlign:'left'},svg:{displayAlign:'left'}};

resources

This page covers the basics of MathML. There are a few other elements like <mphantom> and <mprescripts>. I’m not much of a mathematician so I have yet to really fully utilise these, but you can learn more about them and find more advanced examples here:

Writing mathematics with MathML — MDN
MathML Examples by Jürgen Brandes