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}.

Public MathML Editor's Draft

Today we announced that a public copy of the editor's draft of MathML is available. Previously it was only available to W3C members (or as copies from other locations).

This is a draft “2nd Edition” of MathML 3.0. It incorporates a number of errata that have been reported over the last year. The Math Working Group will continue to gather and correct mistakes in the MathML 3.0 spec and update this draft accordingly.

Please see the change log in the diff marked version for links to highlighted sections that have changed since the first edition of MathML was published.

The draft is available in several formats:

HTML(4)

The Normative version of the spec: HTML 4, one HTML page per chapter with no MathML to be rendered by the browser.

Diff Marked HTML(4)

As above, but with highlighted sections showing any changes from the 1st edition of MathML 3.0.

XHTML + MathML Version

XHTML including MathML examples to be displayed in the browser.

Single file HTML(5) + MathML Version

NEW! The spec as a single HTML page (rather than a page per chapter) with inline MathML examples. This version also includes the option of applying JavaScript to affect the display of MathML, Converting Content MathML to Presentation and optionally invoking the MathJax system to render the MathML.

The transformation to Presentation MathML basically uses my ctop XSLT transformation invoked separately on each MathML fragment via JavaScript.

PDF version.

Version of the document typeset with LaTeX.

As always comments on the draft are welcome. here, or preferably, on the www-math@w3.org mailing list.

html5mathml

As some of you may have seen on google+ With a bit of help, I have MathML working in Firefox Mobile on Android. The key observation (of Karl Tomlinson) was that I needed a recent version of the font I was using (dejavu serif) as older ones did not have the necessary glyphs to build up “stretchy” characters such as large brackets needed for mathematical display.

So I have added support for Firefox/Android to my javascript library for enabling mathml-in-html5 (Firefox all versions, IE+MathPlayer 6-10, Chrome, Safari, Opera are all supported to some extent).

html5mathml on googlecode

This reminded me that I never actually announced its existence, hence this posting. The javascript is maintained in a google code svn repository at html5mathml, although you might want to start with the test/example file at test1.html

The code is all freely available, It is all under the MIT licence, except for the copy of the dejavu serif font which is available under its own custom free licence, included in the distribution.

Usage

The idea is that you write a conforming html5+mathml document and just add the line:

<script src="html5mathml.js"></script>

into the head of the document, adjusting the src attribute to point to a local copy of the files downloaded from the above location. Please do use local copies, googlecode is a source repository not intended for serving production code to be used. Depending on the client browser being used, this JavaScript file may use one of two css files or the above mentioned dejavu font, all of which are available from the source repository.

Comments fixes and experiences using more browsers all welcome, either here, or in email or on the www-math list.

Comparison with MathJax

Currently the primary javascript library for enabling MathML support in browsers is MathJax, so perhaps I should offer some comparison. MathJax does far more than html5mathml, and generally speaking produces better MathML display, however it is somewhat slower and perhaps harder to set up locally (although it now has a public CDN server distribution which simplifies things greatly if access to the server can be assumed).

MathJax includes parsers for Tex-like syntax as well as MathML; this library assumes the input is MathML and relies on the browser to parse it (although includes some fixup for pre-html5 legacy browser parsing.) MathJax can be configured to do its own MathML rendering using CSS, or uses the native MathMl rendering in the browser if available. html5mathml essentially just assumes that the browser has MathML support although it does include css similar to that used in the the CSS profile for MathML. As such it loads much more quickly and reveals the MathML capabilities of the browser.

Future Plans

I try to track browser developments as far as possible (IE10 preview + MathPlayer for example is supported) but this is a spare time activity and I don't have access to all platforms, so any comments or code contributions for other platforms is always welcome. Currently the largest component is the dejavu font, probably I should subset that to just the characters needed for stretchy symbols. IE10 will no doubt require some changes once the full version comes out, and hopefully there will be a version of Chrome using the webkit MathML rendering (as now used in Safari). Similar techniques may be used to enable svg-in-html in legacy browsers that only support svg in xml. An early version of this code, handling MathML and SVG on a smaller range of browsers was discussed in a posting I made to the NAG blog last year.

Converting to Strict Content MathML

Some OpenMath History

MathML and OpenMath have always had a shared history and more or less documented ways of converting between them. Conceptually the conversion is very simple and OpenMath symbol abc could be expressed as the Content MathML symbol <csymbol>abc</csymbol>. Successive versions of MathML have in fact added features that made this conversion simpler and better information preserving. MathML2 added csymbol which is a better fit for OpenMath symbols than ci. In MathML1 and MathML2 further information about the OpenMath Symbol would have to be packaged into the definitionURL attribute. In MathML3 we added explicit support for recording Content Dictionaries by adding a cd attribute to csymbol.

Although the basic idea of the transformation was simple, the details of the transformation were complicated by a desire to map to the pre-defined MathML elements where available. So <OMS name="sin" cd="trans1"/> should map to the MathML element <sin/> rather than <csymbol>sin</csymbol>. The relationship between the predefined MathML Content MathML forms and the simpler, more regular, but much more verbose, OpenMath syntax was not formally specified by MathML so had to be specified as part of the transformation to OpenMath. An early version of such a transformation description is this 10 year old document still available from the OpenMath site. Conversion between MathML and OpenMath. Around the same time, the conversions were implemented in XSLT. The original versions predated XSLT 1, although the versions currently available from the OpenMath site use XSLT 2. Converting from OpenMath to MathML: om2cmml and from MathML to OpenMath: cmml2om.

MathML3 Strict Content MathML

The relationship between <sin/> and <csymbol>sin</csymbol> may rightfully be seen as a purely MathML issue and not something that should be a by-product of converting to the OpenMath form <OMS name="sin"/> and so MathML3 introduced, for each of its Content layout forms, an explicit rewrite rule expressing the construct in Strict Content MathML which is a restricted form just using csymbol. Section 4.6 of Chapter 4 of the MathML 3 spec specifies an explicit multi-pass algorithm applying these rewrite rules to convert any valid Content MathML expression into an expression just using the restricted Strict Content MathML vocabulary. 4.6 The Strict Content MathML Transformation.

Conceptually a conversion to Strict Content MathML could be made which first converted to OpenMath, then converted back to MathML using a stylesheet that removed all the special case rules originally added to om2cmml and documented in the OpenMath report referenced above. This was in fact implemented and is how the majority of the Strict Content MathML examples in Chapter 4 of the MathML spec were constructed. However there were some choices to be made in the mapping specification and in some cases the old OpenMath stylesheets made different choices. Where feasible I updated the stylesheets to match, but one essential structural difference remained. cmml2om implements a typical XSLT depth first walk over the input document, applying whichever template matches at that point. However the working group felt that the exposition of the algorithm was clearer if it was expressed as a multi-pass algorithm where each rule is applied in order over the whole tree, with the result being passed on to the next stage, to be rewritten by the next rewrite rule. These two approaches usually produce the same result, but in edge cases where the order of transformations matter they produce results that are (baring bugs) mathematically equivalent, but are structurally different.

As a requirement for MathML3 to proceed to W3C Recommendation status, we needed to show that the algorithm in Section 4.6 was implementable and did the right thing. It was clear that while my conversion via OpenMath was fairly reasonable it wasn't implementing the algorithm as specified and didn't produce the specified results in all cases.

C2S Implementation

Fortunately Robert Miner (co-chair of the Math WG) stepped up and offered to implement the algorithm as specified. It was good that he did, as inevitably, implementation experience showed some gaps or inconsistencies in the first drafts of the algorithm, and the final published form is much improved as a result of this implementation.

The initial home of the new stylesheet was in the W3C member area of the W3C CVS repository. Recently Robert suggested that we make it public, and asked if I'd host it at my google code web-xslt project site, since it is there and hosts other MathML related XSLT stylesheets.

So Robert's implementation is now available (under W3C or MIT licen[cs]e) from google code: c2s.

Comments on the stylesheet are probably best addressed to the www-math mailing list, but comments may also be dropped here on this blog or on the google code wiki pages.

MathML on the Clipboard

I got a new machine at work with Windows 7 on it.

One of the more interesting applications coming with Windows 7 is the Math Input Panel. This is designed for pen input on a tablet-style device and performs pretty impressively accurate recognition of mathematical expressions. While designed for a tablet, it also works pretty well if you are just “writing” the expression with a finger on a small laptop trackpad, which is how I have been using it.

The Math Input Panel is designed with a very simple interface with virtually no customisation options. It offers no way of saving the expressions generated and just offers a simple insert button that tries to insert the math expression at the insertion point in a currently open application. This works well for Word 2007 which accepts MathML from the clipboard and transparently converts it to its internal form and renders it, but other more generic tools such as XML editors that could use the MathML do not accept MathML from the clipboard in this way. Unlike MathPlayer or Word, The Math Input Panel doesn't offer fallback text representations of the XML markup on the clipboard. Marko Panic, the program manager for the development of this tool confirmed to me that this was a design decision as they didn't want the end user to be faced with raw XML. This is not unreasonable but not what I wanted personally (I like to see my XML raw:-). Marko confirmed that the MathML is on the clipboard and it should be possible to extract it with a few lines of code, or if I wanted a more extensive customisation there was documentation of the API offered by the underlying DLL available at
http://msdn.microsoft.com/en-us/library/dd317324(VS.85).aspx
and
http://msdn.microsoft.com/en-us/library/dd317311(VS.85).aspx.

I decided to brush up my C# forms programming and produced a small form that shows any MathML on the clipboard. The main code (everything apart from the boilerplate Visual Studio files) is available on google code While it's particularly useful to see the MathML generated by the Math Input panel, it also works with other applications, notably MathPlayer and Word, that place MathML on the clipboard.

While looking via Google for some programming tips on my form, I came across a very similar blog posting from last year. That form had some differences though (displaying the IE folding tree view of the XML) so I completed my form here. The screenshot shows the Math Input Panel interpreting my appalling handwriting, and the mmlclipboard form displaying the generated MathML.

XSLT for Presentation MathML in a Browser

Back in 2002 at the MathML Conference I presented a stylesheet, pmathml.xsl, that detected the browser being used and inserted whatever was necessary to enable MathML on that platform. The stylesheet is distributed, along with the slides from the conference presentation, from the W3C Math/XSL area.

The stylesheet is showing its age, in particular a large part of its complexity is due to the fact that that it encodes two completely separate languages in one file, XSLT, and the ‘wd-xslt’ language used in IE5. IE 5 is not an important platform these days, and for some years MathPlayer has been able to act as a MIME Filter in Internet Explorer, and so automatically insert the needed object references into the document without using an XSL stylesheet. However the XSL stylesheet mechanism still has uses, and may be adapted to other browsers. An updated version of this stylesheet has been in use for the NAG Library documentation.

I have placed an updated version of pmathml.xsl on google code. This loses all the wd-xsl code so requires IE6 or later, but it detects Opera and Safari and in that case inserts some extra elements to make it more likely that the documents meets the conditions of the MathML profile for CSS, and links to some CSS to render the resulting elements. The CSS is a combination of some old CSS of mine and George Chavchanidze's CSS developed as part of the MathML profile for CSS.

Unfortunately xlink links no longer work in Firefox 3, and so this version uses some javascript to give link behaviour to any element with an xlink:href attribute. Since it is doing this it also enables links for unprefixed href attributes, in anticipation of MathML3's href attribute for linking.

I hope to extend this to enhance MathML3 support, rendering the new MathML3 features as far as possible in existing browsers. The current check in is mainly to form a baseline in google code before adding any new MathML3 features.

MathML as ASCII Art

Normally one wants to use a full typesetting system, and access to fonts with a rich variety of symbols to typeset mathematics. But sometimes you don't.

Plain text, restricted to ASCII, still has its uses. It is possible to lay out the 2-dimensional mathematical notations as a kind of ‘ASCII-art’. Historically in the days before GUI workbook-style interfaces most Computer Algebra systems would use this kind of layout, and they can usually still be persuaded to use this style even in current versions.

I've just made available a very old stylesheet, it was I think one of the first XSLT 2 stylesheets that I wrote, which renders MathML in this style. It still does not do all of MathML3 (or 2) presentation MathML, but I intend to extend it as time permits.

The stylesheet is available on google code and some examples running against the MathML test suite are shown below.

The google code project also has the htmlparse styesheet discussed previously in this blog, and a perhaps more serious XSLT stylesheet to render MathML via TeX, again that will be extended to cover most of MathML3, as part of the MathML CR implementation phase – something to do over the Christmas break. Documentation of exactly what's in the project will be added eventually, it's only been running a day.

---

sum1

infinity  
  ----    
   \      
    )   x 
   /     i
  ----    
 i = 0    

---

msubsup1

 1    
/  x  
| e dx
/     
 0    

---

mtable2

                                                     2          2                          
1                     x + y                         x  + 2yx + y                           
                       2          2                  3      2     2     3                  
x + y                 x  + 2yx + y                  x  + 3yx  + 3y x + y                   
 2          2          3      2     2     3          4      3     2 2     3     4          
x  + 2yx + y          x  + 3yx  + 3y x + y          x  + 4yx  + 6y x  + 4y x + y           
 3      2     2     3  4      3     2 2     3     4  5      4      2 3      3 2     4     5
x  + 3yx  + 3y x + y  x  + 4yx  + 6y x  + 4y x + y  x  + 5yx  + 10y x  + 10y x  + 5y x + y 

---

mfrac4

       _ 
1 +  \|5 
---------
    2    

---

The EXSLT node-set function

Following on from a thread on xsl-list which turned to the question of support for the useful xx:node-set() extension function in the XSLT engines used by popular browsers.

Using XPath extension functions in a cross-browser environment is greatly simplified if all the XSLT engines use the same extension namespace. This was one of the motivating reasons behind the community initiative to standardise on the EXSLT extension namespaces.

Opera's XSLT engine supports exslt:node-set, Mozilla/Firefox's XSLT engine doesn't in the current release, but does in the "Gran Paradiso" alpha tests for Firefox 3. Internet Explorer (6 and 7) don't support EXSLT, but do support the functionally identical msxsl:node-set function in the usual msxsl extension namespace.

The usual way to handle exslt:node-set and msxsl:node-set in the same document is to use xsl:choose blocks, with tests on function-available('exslt:node-set') but that is often inconvenient if you want to use xx:node-set in the middle of an XPath.

In the above XSL-List thread I casually suggested that an alternative would be to just always use exslt:node-set in the body of the stylesheet and use the msxsl:script extension to define exslt:node-set for IE. That turned out not to be as easy as I thought as node-set isn't a valid function name in either of the supported extension languages in msxsl (JScript or VBScript). However Julian Reschke came up with the construct needed, use associative array syntax so you can use ['node-set'] to define the function. A complete stylesheet using this technique is shown below

<xsl:stylesheet
  version="1.0" 
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:exslt="http://exslt.org/common"
  xmlns:msxsl="urn:schemas-microsoft-com:xslt"
  exclude-result-prefixes="exslt msxsl">
  

<msxsl:script language="JScript" implements-prefix="exslt">
 this['node-set'] =  function (x) {
  return x;
  }
</msxsl:script>


<xsl:variable name="x">
  <y/>
</xsl:variable>

<xsl:template match="x">
  <html>
    <head><title>test exslt node set</title></head>
    <body>
      <xsl:apply-templates select="exslt:node-set($x)/*"/>
    </body>
  </html>
</xsl:template>

<xsl:template match="y">
  <p>node set!</p>
</xsl:template>

</xsl:stylesheet>

The same stylesheet is online together with a test file which just consists of a stylesheet reference and an empty element <x/>.

If your browser supports EXSLT (either natively or using the technique above) viewing the test file link should show "node set!". This appears to work in Firefox Gran paradiso, Internet Explorer 7, Opera 9.21. It doesn't work in Firefox 2 (you get an error message about an unsupported extension function). Users of other browsers that support XSLT (Safari?) feel free to report any results in the comments!

Updated 2008-08-06 to move test file to a different server.

Updated 2009-12-17 to move to google code server. The file now reports that Safari 3.2 supports node-set