May 16, 2008, 9:56 am

Website Design

Displaying Mathematics on the Web

 

HTML is limited in its ability to mark up the wide range of notation needed to display a full range of mathematical content on a web page.

The development of Extensible Markup Language, XML, and with it MathML, provides a means of accurately displaying such content. I should at this point state that there already exists one superb means of achieving this. TeX is widely used by authors to produce printed mathematical material and it is possible to display TeX documents on the Web. I do not plan to discuss this here, but for those of you who are familiar with TeX, I can recommend a book on this subject.
"The LaTeX Web Companion" by Michael Goosens and Sebastian Rahtz - Addison Wesley.

Some believe that MathML has far reaching consequences for delivering distance learning courses on mathematics. A good example of this will be the production of mathematical software for the visually impaired.

Several OU maths courses use Mathcad and, like other developers in the field, MathSoft have integrated MathML into their software. Mathcad 14.0 is the latest version (2007). I have used a previous version, Mathcad 2001, which demonstrated the potential to export mathematical documents to the Web. I will discuss this in more detail on a later page.

Although recent versions of Mathcad have demonstrated the enormous potential of MathML, for users of older versions of the software the problem remains of transfering notations to a web page. The easiest solution is equivalent to the text-as-graphic scenario I discussed earlier. One needs to convert the notation into a gif or jpeg before inserting that file into a web page. With a graphics software package, this does not have to be a tedious process.

The expression that follows, together with the blue text below it, was written in Mathcad 5.0 and took a few minutes to achieve.

The gif file is only 2K in size. So how did I make it?

As with most of the graphics on this site, I use Fireworks from Adobe. Fireworks is not suitable for print and was specifically developed for the Web. For software that will cover both print and Web work, one must consider cost. The best that money can buy is Photoshop also from Adobe, although for photos I use Photoshop Elements. This is a cut-down version of Photoshop and was given away with a Minolta slide scanner that I purchased a while ago.

Here are the steps that I took to produce the above image:

1. I opened the Mathcad file and took a screenshot with the Alt+PrintScreen key combination.
2. I opened Fireworks and selected File/New whereupon a dialogue box opened. I accepted the page size with OK, since FW automatically sets its page size to the size of the screenshot.
3. I used Ctrl-V to paste in the screenshot from the clipboard.
4. I sliced up the image with a tool provided by FW. That way I could select just the notation and text.
5. I exported the FW image to a directory before selecting the required image slice, renaming it mathcad1.gif
6. I wrote the required HTML to place it in this web page
   <img src="images/mathcad1.gif" width="316" height="144" alt="a mathematical expression and some text" />

There are cheaper alternatives and a search of the Web will unearth free imaging software, but they all take a lot longer.

Displaying simple equations using HTML markup is possible, as this example of a congruence proof demonstrates. However, for speed, control and range of symbols the FW/Mathcad combination is hard to beat.

Some mathematicians use MS Word in conjunction with Microsoft's Equation Editor. I have taken a look at this and you can view an account of the far from impressive results on the next page.

Next page » MS Equation Editor

Previous page « Displaying Text With Graphics

Copyright © 2008 John McSweeney