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 as a 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 snippets, <math> is excluded 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> <!-- 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 previously 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, 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. 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
Examples by Jürgen Brandes