Math equations in HTML

Recently one of our wonderful clients The Australian Association Of Mathematics Teachers Inc. (AAMT) needed a new eZ Publish sub-site added to their existing website. eZ Publish has a powerfully flexible system for this called site-access which I'll share on separately. As this new sub-site is to be an educational resource for teachers of mathematics accurate and consistent display of mathematical equations is very important. Initially I was unaware of the challenges of presenting maths in HTML. AAMT was naturally more familiar with it and brought me up to speed, I've since learnt even presenting a simple fraction is difficult, the typical way eg. ¼ is technically incorrect, the angled line dividing the fraction should actually be a vinculum however HTML has no character support for a vinculum.

Time to do some research, I found a very good article on the topic by Jukka Korpela called Math in HTML (and CSS) from which I concluded there are essentially 3 paths to choose from.

  1. use HTML / CSS "trickery"
  2. use Images
  3. use a dedicated JavaScript module

HTML/CSS requires the use of css tricks like text-decoration: overline and position to massage content into appearing correct, however its quite crude and the results are not consistent cross browsers.
Images was the initial choice of the client as it ensured accuracy across browser and print, this is probably the most common method used currently.
Then there are JavaScript modules dedicated to this purpose, notably there is jqMath and MathJax while jqMath states that ”MathJax is much bigger and more complicated than jqMath” I found the difference to not be significant enough to concern me particularly since the instances per page for our use will be relatively low and I also found the larger user-base of MathJax was likely to result in better development and support into the future.

The client assessed MathJax and requested its inclusion, so we built an eZ Publish extension that loads MathJax in eZ Publish, LaTeX expressions to be written directly into XML fields. The MathJax tag line is "Beautiful math in all browsers" and it does live up to the claim rendering correct mathematical formula and equations consistently. If you have similar a need I recommend you check out MathJax.

Link to the new sub-site will be added once the site is made public.

comments powered by Disqus