Math formulas in HTML




The problem

Formulas written in HTML is one of the areas where development has been soemwhat sparse. Not in HTML 5 either. For web sites you therefore see various more or less elegant workarounds. For formulas you have the following options:





Using tables

Building formulas using tables is a matter of thinking in cells that are merged or not, and whether the table is inline or not.

If we start with inline, that could be something like having two numbers on top of each other in a sentence, like the isotope
2
1
H, or the fraction
1
x
. Here you use the style display:inline-table, and from here it is just a table, like any other.

If we look at the two examples, the respective codes are

<TABLE STYLE="display:inline-table; font-size:65%; border-collapse:collapse; vertical-align:middle"><TR><TD STYLE="padding:0px">2</TD></TR> <TR><TD STYLE="padding:0px;">1</TD></TR></TABLE>H


and

<TABLE STYLE="display:inline-table; font-size:65%; border-collapse:collapse; vertical-align:middle"><TR><TD STYLE="padding:0px; border-bottom: solid 1px; width:8px; text-align:center">1</TD></TR> <TR><TD STYLE="padding:0px; text-align:center">x</TD></TR></TABLE>


The way the codes are written here, they are quite long and look a bit complicated. Normally you would define some classes instead, making it easier to work with.


Bigger formulas requre bigger tables, and you don't have them inline, but basically you do it the same way. If we look at the acid constant for acetic acid, which looks like this:

Ka = [H+] · [CH3COO]
[CH3COOH]


It is only a matter of an adapted table with text. If you show the borders, it becomes clear:

Ka = [H+] · [CH3COO]
[CH3COOH]

The advantage in using tables, compared to images or MathJax, is that the formulas scale nicely, and look nice and readable on both screen and print-outs, and, as seen, you get to keep the font from the text in the formulas, thus getting a nice, seamless visual experience when reading the page.





MathJax

MathJax is an API (application programming interface), i.e. an external program/tool, you can call like other scripts. To make it work, you need the following two lines in your HEAD tag:

<SCRIPT SRC='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></SCRIPT>
<SCRIPT>MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}})</SCRIPT>


From here, you just have to write the right code for the formulas, and MathJax will convert it to readable formulas when the page is opened. Instead of a start and stop tag, you use $$ before and after. So, writing the solution to a second degree equations, the code looks like this:

$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$


On the screen, it looks like this:

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$


On MathJax' own web site and on various tutorials you can find instructions on the names of the commands, and how to use them, to get the various characters and figures, if you want to use this solution. If you don't mind the possible delays from connecting to MathJax' server, and having another typography for you formulas than the rest of the text (or take it the other way around and use a font that looks like the one used for the formulas), MathJax is definitely a fine solution for formulas.