As part of the project I’m working on, I need to show a bunch of equations within Flex and I spent a good portion of today looking at how to do that. In the process, I learned a lot of things that I didn’t know before. Hopefully some of it will come in handy, and I thought I’d share for other people who may be in the same boat.
MathML is an XML based W3C standard for representing equations over the web. Using MathML you can take this snippet of code:
<math xmlns=“http://www.w3.org/1998/Math/MathML“>
<mrow>
<mi>α</mi>
<mfrac>
<mrow>
<mn>2
</mn>
</mrow>
<mrow>
<msup>
<mrow>
<mi>σ</mi>
</mrow>
<mrow>
<mi>e
</mi>
</mrow>
</msup>
</mrow>
</mfrac>
</mrow>
</math>
And have it display like this (this will only work if you have a MathML enabled browser such as FireFox):
α
2
σ
e
(although it isn’t displaying correctly for me right now).
So what I was trying to find was a way to convert that MathML code into a vector based graphic format that I can use in Flex. I may be going overboard by trying to use a vector based format as opposed to a GIF or a JPEG, but I do want it to be scalable and since Flex has support for SVG, I thought it would be the perfect choice.
Unfortunately, I haven’t found an easy way to convert the MathML format to SVG. There is a white paper on it here but I don’t understand XML quite well enough to make it useful. I only got a chance to skim it so I may try to work through it tomorrow if it looks like the best solution.
I found some cool Flash based equation editors over at GalaxyGoo. And TerraDotta has a sweet app that you can try a live demo of, MathIWYG over at their site.
If anyone has any suggestions, let me know!