Math in web pages

Introduction

Although HTML is very suitable for making all sorts of papers, articles or reports, HTML markup for scientific formulas never seem to have been given too much attention. Very odd, given the fact that HTML was originally developed at a physics institute. Code in the Mathematical Markup Language (MathML) can be embedded in HTML5, but native browser support is very limited without much signs of coming improvements. There are however, some less than ideal workarounds.

Apart from mathematical expressions, mathematics pictures, like geometrical figures, graphs, diagrams and charts, can be added as images. Since HTML5 these images can be in the SVG format which is supported by all modern browsers. HTML5 also provides a canvas element to "draw" figures. Both SVG and canvas graphics can be animated and made interactive by using JavaScript. There is even X3D, a markup language for 3D structures. Although X3D is not natively supported yet by any browser, there are JavaScript libraries available to let the user manipulate a projection on screen.

Mathematical expressions

In documents with only a few simple mathematical expressions, available HTML elements and plain text (see below) are mostly best choice. It may also be better to use plain text and HTML to include the simple (inline) expressions in documents where MathML (or other specific formats) is used to mark up the more complex math. This may save considerable loading, parsing and rendering time. MathML together with MathJax are most suitable for the more complex expressions (see file above). And for the really complex math you may want to resort to SVG images.

To help you to construct expressions in AsciiMath (which can also be used for the plain text math format), LaTeX or MathML several online WYSIWYG editing tools are available:

Right clicking expressions marked up in AsciiMath or LaTeX in a document using MathJax will show you the possibility to output the expression in MathML.

Static mathematical graphics

Digital images can be stored in a raster format, like GIF, PNG, JPG, or in a vector format. The vector format Scalable Vector Graphics (SVG) is a W3C recommendation for the web and can be embedded in HTML5. Contrary to raster images, SVG always displays as sharp as the screen can deliver, at whatever size they are displayed and SVG file sizes are usually (considerably) smaller than raster images, except for the more complex images with lots of graphics elements. In general SVG is the preferred format for mathematical graphics in web documents (see file above), but in case of large and complex graphics a raster image may be a better choice. Also the fact that older browser versions may not support SVG could be a reason to (also) provide a raster image.

Interactivity and animations

Additional to "static" content, animations and interactive graphics can provide extra support and extra clarification to the user. However, mind the possibility that content conveyed by scripts may not reach users with JavaScript disabled browsers or visual impaired users whose screen reader have no access to this content.

Both SVG and <canvas> images can be made interactive and can be animated using JavaScript. SVG is scalable and every element is separately accessible via the DOM, but SVG generally renders slower than <canvas> graphics. Especially for complex and graphic-intensive animations, <canvas> graphics are mostly better suited than SVG.

The "old-fashioned" way to include "animations" is to use animated GIF. A number of successive GIF frames are made and by using some application joined together in one GIF file in which the frames are displayed in successive order with set time delays, forming a video clip. Animated GIF is widely supported by browsers, and no scripts are needed. Animated GIF is not responsive, has a reduced number of possible colors, is not easy to edit and usually has large file sizes. Unless scripts are used, animated GIF is not interactive.