Sunday, 21 October 2012

MathML Long Division

So, I received an email asking for information on which editors support generating the MathML3 markup for long division. I gave the (honest) answer that I'd use emacs and James Clark's rather wonderful nxml-mode, but I felt a bit embarrassed by that answer.

The “elementary mathematics” markup was added at MathML3 specifically at the request of the Accessibility community as it is much easier to give accessible renderings of long division if the numbers involved in the layout are given as complete numbers rather than digits being aligned in a table layout.

My correspondent observed that neither using emacs nor direct editing of XML markup were the standard mode of operation for people generating the kind of documents at hand.

So I spent a bit of time this weekend with a long division layout generator implemented in JavaScript. The JavaScript is probably sub-optimal at this stage but it apparently works OK.

The code is available under the MIT licence (if that licence isn't suitable contact me) from google code at

Please Note: While the generator may be run online from that URI, google code servers are not intended to be used for running code, if you intend to make use of the generator, please save the HTML file to your local disk and run it from there. (The code is a single HTML file and doesn't need a server or internet access.)

The generator lets you enter two integers (decimal points are not currently supported) and calculates the long division layout for the integer division of the first by the second. The first number is treated as a string so may be larger than a JavaScript integer, the second number can be at most a tenth of the maximum JavaScript integer.

The generator generates the layout as “ASCII-art” and the MathML markup, both as code shown in a pre element, and inlined in the document to be displayed in the browser.

At the current time the only MathML renderer that natively supports this markup that I know about is MathPlayer3 in Internet Explorer. If using that system the third column shows the typeset display and the Accessibility benefits may be showcased by using its right menu to get MathPlayer to give a voice rendering of the expression.

It is possible to display mlongdiv in MathML2 based systems by using the xslt/javascript to convert it to a tabular layout using mtable. The ctop stylesheet (as optionally used in the Editor's draft of MathML) is one possible implementation of such a transformation.

As an example, if you enter 567 ÷ 17 the generated displays are

17 | 567
<math xmlns=''>
<msgroup position='1' shift='-1'>
<msline length='2'/>
<msline length='3'/>
<msgroup position='1'>

Updated 2012-10-23
A variant suitable for MathML2 and LaTeX and so in particular working with MathJax is available from the same directory Rather than use a form this uses the MathJax TeX parser to parse input of the form \longdiv{567}{17}.


Steve Noble said...

Thanks so much for taking the time to do this. There are plenty of people in the accessibility field who want to implement MathML, but who don't have a background in computer science and would not know where to begin to hand code MathML content. These are among the masses for whom MathML was designed, according to the premise provided on and oft repeated elsewhere:
"MathML is not intended for editing by hand, but is for handling by specialized authoring tools such as equation editors, or for export to and from other math packages."

Your handy application will be very useful until the equation editor community catches up.

--Steve Noble

Ionel Alexandru said...

Try my FMmath Editor at

There is a wizard to generate long division and also I made an implementation for mathml markup for long division.

Ionel Alexandru