Technics‎ > ‎

Showing mathematical equations in HTML

Displaying mathematical functions in a computer always represented a further difficulty.

In the days before the World Wide Web different word processors, some in text mode, other in graphical mode and each in its own way, could represent equations with a built-in editor or with other techniques, but this was almost always restricted to the program that created them and was almost impossible to transport a document with this type of content from one program to another.

In 1984 a man named Leslie Lamport created a handy language called latex. This is a language for generating documents effectively managed to separate form from content. Somehow the fact of separating form from content was lost with the unstoppable advance of word processors like Microsoft Word series and other similar programs.

Today, with the incredible size that has claimed the WWW, and standard HTML language, the separation of form from content has returned. But mathematical equations still represent a major challenge.

In our research we had this challenge; we needed a website that could show mathematical equations, standard, without using proprietary software, accessible and of course without using images. We are not against the images, but for us the mathematical text is still text, with an image we could not separate form from content, not to mention that a search robot can’t read them, or that is impossible to enlarge them and preserve its quality, the bottom line is, there are many cons using images.

The MathML standard format was one of the options evaluated at first. MathML is a standard format that exists since long ago, but since recently it was adopted by the HTML5 standard to show mathematical equations, it was attractive for us. At first it seemed a good choice because it was standard, was open, was accessible, but it had some things we didn’t like. First the code that was generated was quite difficult to read and write without any additional editor, secondly the browsers had to be compatible with HTML5, which is valid in Firefox, Chrome and Safari, but not in browsers like Internet Explorer 7 and 8, which still have a strong market penetration.

The solutions used by large sites were not to our liking. Wikipedia on the other hand uses images and Wolfram Alpha, the computational engine created by the scientist Stephen Wolfram, creator of the famous software Mathematica uses its own closed and proprietary routine for that purpose.

Finally and researching a LaTeX support with HTML, we found the solution: MathJax. MathJax is a small Javascript library created to render or display math equations in HTML documents.

This small software interprets and draws the equations, which can be written in LaTeX or MathML, without the need of any additional plugin or anything like that.

Its way to use is extremely simple. When you add the library to the website, automatically, every LaTeX or MathML ecuation is perfectly drawn, with the ability to change their size and other features very comfortable that appear when you right-click on each equation.

MathJax is open source and works on all modern browsers, including Safari on Apple mobile devices (iPhone, iPad, iPod), Android, Blackberry and Symbian OS.

The list of compatible browsers can be found here
Many scientific projects need to show formulas, equations or mathematical elements in web pages. We found an excellent alternative with MathJax: lightweight, inexpensive, stable, open, fast and highly compatible.

For more information: