MathML support in OpenLaszlo

I'm happy to announce that my company (Tempest Strings Enterprises) has sponsored my development and release of a MathML library for OpenLaszlo. I'll be working through the OpenLaszlo contributor process, but imagine that it could take a considerable amount of time before you see this work in their repository since I've not yet made any effort to adhere to any coding guidelines. There is very little documentation in the source, no consistent style, and no support for any runtime except SWF. Nevertheless, I've already successfully integrated the library with a larger application and it is functioning well in our beta release.

This library is based upon the Flash Actionscript library that ionel-alexandru (Sourceforge username) of donated to the public domain. I make heavy use of Alex's object tree and MathML rendering logic (thanks Alex!). I've built upon OpenLaszlo's Drawview class from their SVN trunk and added support for rendering stand-alone MathML from a datasource as well as formulas placed inline with other text.

Note that the full set of MathML has not yet been implemented (ex: no support for <mtable>) but here are some examples of supported formulas:

<dataset name="example1"><math><mrow><msqrt>        <mrow>                <msup>                        <mn>2</mn>                        <mrow>                                <msup>                                        <mi>x</mi>                                        <mn>2</mn>                                </msup>                                <mo>+</mo>                                <mrow>                                        <mn>4</mn>                                        <mi>x</mi>                                </mrow>                                <mo>+</mo>                                <mn>4</mn>                        </mrow>                </msup>                <mo>+</mo>                <mrow>                        <mn>4</mn>                        <mi>x</mi>                </mrow>                <mo>+</mo>                <mn>45</mn>        </mrow></msqrt><mo>+</mo><mroot linethickness="3"><mrow>        <msub>                <mi>log</mi>                <mn>2</mn>        </msub></mrow><mi>5</mi></mroot></mrow></math></dataset>
renders with the library as:

<dataset name="example2"><math>        <mrow>                <mo> ( </mo>                <mfrac linethickness="0" color="#006699">                        <mi fontstyle="bold"> a + b +c </mi>                        <mi color="#ff0000"> b </mi>                </mfrac>                <mo> ) </mo>        </mrow>        <mfrac linethickness="2" fontstyle="italic" >                <mrow><mi color="#00ff00">3456</mi><mo>+</mo><mfrac>                        <mi> a </mi>                        <mi fontsize="8"> b + c + d</mi>                </mfrac>                </mrow><mrow><mn>3</mn>        <mfrac color="#ffff00">                        <mi> c + d </mi>                        <mi color="#ff0000"> d </mi>                </mfrac>        </mrow>        </mfrac></math></dataset>
makes use of node-level styling to render as

The next one really shows off some of the fancy rendering capabilities:

<dataset name="example3"><math>        <msubsup>                <mo><![CDATA[???]]></mo><mn>2</mn><mn>56</mn>        </msubsup>        <msup>                <mi>x</mi>                <mn>2</mn>        </msup>        <mtext fontstyle='italic'>dx</mtext><mo>+</mo>        <msubsup>                <mo><![CDATA[???]]></mo>                <mi>-<![CDATA[&infinity;]]></mi>                <mi><![CDATA[&infinity;]]></mi>        </msubsup>        <msup>                <mi>e</mi>                <mn>x</mn>        </msup>        <mtext fontstyle='italic'>dx</mtext><mo>+</mo>        <munderover>                <mo><![CDATA[???]]></mo>                <mrow>                        <mi>x</mi>                        <mo>=</mo>                        <mn>0</mn>                </mrow>                <mn>56</mn>        </munderover>        <msup>                <mi>x</mi>                <mn>2</mn>        </msup>        <mo>+</mo>        <munderover>                <mo><![CDATA[???]]></mo>                <mrow>                        <mi>x</mi>                        <mo>=</mo>                        <mn>0</mn>                </mrow>                <mi><![CDATA[&infinity;]]></mi>        </munderover>        <msup>                <mi>x</mi>                <mn>2</mn>        </msup>        <mo>+</mo>        <munderover>                <mo><![CDATA[???]]></mo>        <mrow><mi>x</mi><mo>=</mo><mn>1</mn></mrow>        <mi>n</mi></munderover><mrow>        <mi>x</mi></mrow><mo>+</mo>        <munder>                <mrow>                        <mi>lim</mi>                </mrow>                <mrow>                        <mi>x</mi>                <mo><![CDATA[???]]></mo>                <mn>0</mn>        </mrow></munder><mrow>        <mi>x</mi></mrow></math></dataset>

This last example is demonstrating inline rendering with text:

<dataset name="myFormula"><![CDATA[T
his is an example of pseudo inline MathML:<math> <mrow> <mi>x</mi> <mo>+</mo> <msup> <mi>y</mi> <mfrac> <mn>2</mn> <mrow> <mi>k</mi> <mo>+</mo> <mn>1</mn> </mrow> </mfrac> </msup> </mrow> </math>How do you like them apples?]]></dataset>

All of the formulas above were displayed using the same MathML view using the datasets listed. Here's the view declaration:

<mathmlview font="sans-serif" fontsize="24" fgcolor="#000000" id="math" x="10" y="10" width="800" height="500" datapath="myFormula:/"/>
The current source is released under the MIT Open Source License and available on github. Enjoy!
Share Comments