Let’s talk MathML

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

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.

MathJax

MathJax is a Javascript framework which can be leveraged to display MathML equations in any reading system or browser that supports Javascript. Should your users land on a device or reading system that does not support Javascript, a meaningful image fallback with descriptive text can be offered — from a workflow perspective a person can even generate the image via MathJax as SVG and converted to PNG via some clever coding.

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. 

The situation looks like this, our IMOs work to keep styling and code separate from the parent page by having our interactives land in an iframe content window. You can envision this as each chapter of your book being a long form web page… then, where applicable, iframe windows are placed calling in “sub pages” containing interactive content and providing a hook for fallback scenarios (i.e. an EPUB manifest fallback). This provides the broadest cross-platform, cross-browser, cross-ecosystem support given the multitude of electronic readers that don’t support Javascript from the root level page. 

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:

<script type="text/javascript" src="MathJax/MathJax.js?config=MML_SVG"></script>

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]
  • MathJax/docs
  • MathJax/extensions/HTML-CSS
  • MathJax/extensions/TeX
  • MathJax/extensions/CHTML-preview.js
  • MathJax/fonts
  • MathJax/jax/input/AsciiMath
  • MathJax/jax/input/TeX
  • MathJax/jax/output/CommonHTML
  • MathJax/jax/output/HTML-CSS
  • MathJax/unpacked

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 a0 , there are two solutions to ax2 + bx + c = 0 and they are x = b ± b2 4ac 2a .

Summary

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.