Putting Maths on the Web
One of the projects I’m about to start is developing some learning resources to help nursing students with their maths. As part of that I’ve been revisiting putting maths on the web. Maths can be incorporated into a web page as MathML or as images, and as usual there isn’t a simple answer but hopefully you’ll find something below to give you a starting point to meet your own particular needs.
Images or MathML?
The downside to using MathML is that Internet Explorer won’t display the equation correctly without a plugin. Firefox at least understands MathML but needs extra fonts installed to display it correctly. Plugins and fonts both live on the client machine, which means we’re relying on the user to have their computer configured correctly in order to see our content. The plus side is accessibility because screenreaders can read the MathML and give meaningful content to visually-impaired users.
Creating the images
The other approach is to use images. Generating the images is fairly straightforward. I’ve used a combination of DragMath and MathTran. DragMath is a Java-based visual tool that generates a snippet of LaTeX code. Once I’ve got my LaTeX code I open a basic html page. Generating the images from the html page needs two things:
- A link to the javascript file in the head:
<script type="text/javascript" src="http://www.mathtran.org/js/mathtran_img.js"></script> - An image tag in the body:
<img alt="tex: LatexCode" />with my LaTeX code pasted in to replace where it says LatexCode
The javascript creates a png image from the LaTeXcode and inserts into the web page. Right-click on the equation image, choose ‘Save Image as’ and the image can be reused where ever it’s needed. The advantage is I don’t have to worry about what’s installed on the user’s machine, but the disadvantage is if I want to use the image on a web then accessibility becomes an issue. Another issue is that DragMath is maths-orientated so I would have problems creating a different type of equation. I could write the LaTeXcode myself, but that’s a whole different tool set and learning curve for most people.
Using OpenOffice
Another approach is to use OpenOffice. I can create formulae in OpenOffice by ‘Insert - Object - Equation’ in OpenOffice Writer. Creating the equation is fairly straightforward (there are links to the documentation in further help below) and then I have a choice. I can export directly as MathML by:
- clicking back in the document (to stop editing the equation),
- right-clicking on the equation,
- choosing ‘Save Copy as’
- When the dialog box appears, dropping down the list of formats (the default is pdf) and choosing ‘MathML 1.01′.
Alternatively, I can export the whole document as LaTeX by:
- clicking on the ‘File’ menu and choosing ‘Export’.
- When the dialog box appears, drop down the list of formats and choose ‘LaTeX 2e’.
- Then open the saved tex file in a plain text editor and find the latex code for the formula. It’ll be between the begin{document} and end{document} lines, and starts with something similar to $\mathit.
- Copy the latex code into MathTran to generate the image.
Problems and other methods
MathTran uses TeX while the methods outlined above are dealing with LaTeX, and there are some syntax differences. If you have editing access to a wiki using MediaWiki then you can put LaTeX code between <math> and </math> tags and a png image will be generated.


