CSS structure for creating complex mathematical expressions

Question

I want to show complex mathematical expressions like this ...

... without using images or javascript.

It seems that for most true glyphs, HTML characters exist, so the challenge is to scale and stack them into the correct configuration. This seems doable, but not practical for a large number of expressions. My instinct is to put together a series of classes that combine to produce a “mathematical CSS structure”.

Before opening this Pandora's box, I wonder if this problem has already been solved. Google doesn't seem to think like that, but maybe you know something else.

NOTE. I like awesome HTML5 and jazzy CSS3 tricks, like the next guy, but I need IE8 + :-(

Answer 1

Take a look at MathJax.

http://www.cs.tut.fi/~jkorpela/math/

It may also help.

http://www.myphysicslab.com/web_math.html