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 http://html5mathml.googlecode.com/svn/trunk/longdiv.html

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

      33
    ----
17 | 567
     51
    ---
      57
      51
     ---
       6

<math xmlns='http://www.w3.org/1998/Math/MathML'>
<mlongdiv>
<mn>17</mn>
<mn>33</mn>
<mn>567</mn>
<msgroup position='1' shift='-1'>
<msgroup>
<mn>51</mn>
<msline length='2'/>
</msgroup>
<msgroup>
<mn>57</mn>
<mn>51</mn>
<msline length='3'/>
</msgroup>
<msgroup position='1'>
<mn>6</mn>
</msgroup>
</msgroup>
</mlongdiv>
</math>

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

Chrome!