Math formulas in HTML

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:

• Pictures of formulas, done with a formula/equation editor, e.g. in Open Office or Office 365. It is an easy solution in regards to insertion using the IMG tag. Editing can be a bit difficult, because you need to go through several programs. Visually is rarely looks nice.
• Tables. By being a bit creative in construction tables, possibly along with some SVG, you can obtain a visually beautiful result. The methos is a bit time consuming, until you have a library of formulas to use from. On the other han, the editing can be very easy, and most importantly, there are no limitations to what you can do.
• MathML. As a part of HTML 5, you have the tag MATH, with which you can construct formulas. The basic ideas is good, and the result looks nice, on the browsers that can use the tag. Unfortunately, not all browsers can use the tag. Right now, only Firefox and Opera handles the tag correctly. Safari is handling some of it right. For all intents and purposes, this solution is currently not usable.
• MathJax. To get around the limitations in formulas, an open-source project has been started, that can create formulas, based on JavaScript. There are some limitations to what you can show, and you are limited to the font types that comes with the system. Also you have to be aware, that opening the page involves an API call. API calls can cause som delays in showing pages, especially since MathJax isn't loading asynchronous (i.e. the other things to be loaded have to wait for the call to MathJax to be in place).

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



and



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:



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


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 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:



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:



On the screen, it looks like this:



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.