An interesting challenge that passes by my desk more and more frequently these days is, “How do we present our books Math and Chemistry equations in a digital workflow?”. On the surface it’s about presentation but behind the scenes it’s a little more complicated than this. We need to think data-storage, robustness, and access for all.
For anyone that knows me this recommendation will come as no surprise, when looking for a strongly typed data storage markup with loads of inherent translation abilities look no further than XML. More specifically, MathML.
MathML has stood as a de facto industry standard for equations, scientific and chemical formulas for some time now. Ask our designers and they’ll reminisce about MathML equation editors in InDesign or providing image work for drafts in Word. But today we need MathML for more than semantic accuracy. MathML provides a rich markup that is easily translated between business interests as well as providing the quality structure to be leveraged for accessibility concerns for all our users. So what’s the catch!
Well, the catch is not all web browsers are equal. Furthermore a great deal of Ebook reading systems are based on browser technology thus complicating an already complex set of support, partial support, bad support or no support at all situations. To solve this problem, creativity and flexibility are the order of the day. Enter MathJax.
To build or not to build
As interactive content creators we began to wonder, can we solve this problem via an Interactive Media Object? The short answer is yes, but it’s not a great fit for the framework and here’s why.
Now, when we look at MathJax from a devops perspective we see a fantastic tool, but one that will quickly become a pain point from a bandwidth and traffic perspective. MathJax is a large fileset 64Mb uncompressed and while settings and average user interactions can result in only using a megabyte of this fileset — there is the potential to be quite a bit more than this which will certainly impact on cloud storage and file management if the library is duplicated or the use of HTML/CSS with fonts is utilized.
The other notable reason compounding this issue is that most textbooks with equations tend to have 10, 20, or even 30 equations per page intermixed with the chapter material. If a chapter has 30 pages with even just 10 equations per page we’re asking a reading system (or a web browser) to open and render over 300 iframes! Far from a reasonable solution.
So what can be done
There are many potential scenarios out there, if your in control of the reading system itself you either have MathML support currently or will be able to implement MathML globally via MathJax from within those confines, but if your working third party or, like most of us, use prescribed reading systems from your ecosystem then some alternative means are required.
Let’s assume we’re discussing adding MathML support to your Content Management System or Learning Management System. In this scenario you can add MathJax to your system once and refer to it from multiple pages or inject it into every content page to render all equations at once. In our testing we were able to reduce the footprint of MathJax down to 13Mb while still keeping the plethora of accessibility features that make MathJax such a sought after tool. Let’s see how…
Trimming the Jax
The first step is to download MathJax and have a read through the documentation. Once you have a basic familiarity with the framework you recognize the notion of Input and Output “Jax”, basically we can pick and choose how we work with MathJax and once that choice is made, remove the added weight of the other Jax in the process. First we’ll need to upload MathJax to a global location in our CMS/LMS or website. For this example let’s assume our equations will always be coming in as MathML and we’re always outputting SVG. We can now target these Jax in the configuration of our site. In the head of your HTML page we can add the following script tag to accomplish this:
Now we can open up the MathJax folder we’ve uploaded and remove some of the unneeded files:
- MathJax/config/[All other config files but MML_SVG.js can be deleted]
We’ve now streamlined the fileset and have MathJax linked in our HTML head, great! It’s now time to add some MathML and see if it works.
Bring in the equations
Now we simple open up the HTML body and add in our MathML like so:
<p> When <math xmlns="http://www.w3.org/1998/Math/MathML"> <mi>a</mi><mo>≠</mo><mn>0</mn> </math>, there are two solutions to <math xmlns="http://www.w3.org/1998/Math/MathML"> <mi>a</mi><msup><mi>x</mi><mn>2</mn></msup> <mo>+</mo> <mi>b</mi><mi>x</mi> <mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn> </math> and they are <math xmlns="http://www.w3.org/1998/Math/MathML" display="block"> <mi>x</mi> <mo>=</mo> <mrow> <mfrac> <mrow> <mo>−</mo> <mi>b</mi> <mo>±</mo> <msqrt> <msup><mi>b</mi><mn>2</mn></msup> <mo>−</mo> <mn>4</mn><mi>a</mi><mi>c</mi> </msqrt> </mrow> <mrow> <mn>2</mn><mi>a</mi> </mrow> </mfrac> </mrow> <mtext>.</mtext> </math> </p>
And here we see the results below, go ahead and right-click to witness the power of MathJax in action:
When , there are two solutions to and they are
MathML is an important means to display math and chemistry equations to our students, staff, and broader user base. With a little care it can easily be added to any online portal or website and can be just as easily added to EPUB3 textbooks as a global resource. If you have any questions, feel free to reach out we’re here to help.