Math(ML) in Education Digital Content

The MathML Challenge

Publishers and authors wants math to be at least as straight-forward to produce as a print book with high-quality equation presentation. This post explain the various options to create MathML using IGP:Digital Publisher and deliver it to all platforms and devices using AZARDI:Content Fulfilment. The concepts and approaches also apply generally, not just to our products.

Because most ePub 3 reading systems are Webkit based there is a voice that says MathML cannot be done. That voice is mostly right. It cannot be done easily. With Google branching Blink from Webkit and removing MathML completely, expect to see no native MathML in an Android device near you soon.

If you want to understand the state of mathematics production and browser support check out this very long discussion about MathML in Mozilla on Google Groups.

Wonderfully and wickedly the HTML5 specification supports both MathML and SVG as part of the family. No poor-cousin namespace stuff. This is very good of course but Firefox is the only browser that has anyway reasonable MathML

Setting the Stage

Here is some simple MathML; the beloved and "demonstration-overworked" quadratic equation. To set the tone for this article it is presented in MathML, SVG and PNG.

MathML

Here the MathML is show at the default page font size and font-size 2em. If you hover over the small equation it will become big, red and bold. Firefox has the STIX fonts installed by default so there is nothing else to do except "enjoy the maths".

 

 

 

If you are using Firefox you will see the MathML equation. If you are using any other browser you will see whatever the browser wants you to see. Generally a string of text.

SVG

The SVG was generated from the MathML equation is resizable and shown here small and large. It can be SVG outlines (which makes large and complicated SVG files), or include font support (best for file size and rendering speed). In this case you have to make the font available in the SVG.

The advantage of SVG is that it can scale with a reading system. It will also work for ePub2 if the reading system supports SVG. Many earlier Android readers don't.

PNG - Image Maths

Any equation image has to be made larger and sized down to work even reasonably well. It is dependent on the reading devices anti-aliasing for final quality but is nearly always going to have that soft edge.

 The top image is a 1:1 screen grab of a browser rendition. If this was taken from a PDF it would not appear as sharp. The next image is the same as the image above but has been scaled up to represent some sort of scaling in a reading system. You can immediately see the anti-aliasing artifacts. These will be clearly visible on 160ppi devices but may be less of a problem on 300ppi + devices.

 Finally this is a PNG image that has been created at twice the standard text size and scaled proportionately with the image above. You can immediately see the clarity improvement and minimization of anti-aliasing artifacts.

If you were to package this MathML into an ePub3 and view it in a reader other than AZARDI you will see nothing coherent. But this doesn't mean excellent presentation Math cannot be done.

MathJax

Finally (but certainly not least) here is native MathML rendered by MathJax. Right click on the equation to explore the various presentation options. You should be able to view this in a very wide range of browsers.