Transforms

CSS 2D transforms are used to stretch and scale parens and the square root radical in src/commands.js.

These are not supported in IE <9, but IE >=5.5 have Matrix Filters that can do arbitrary 2D transforms, too. Unfortunately, used naively they alias horribly, but I figured out two tricks:

• rather than stretching with the Matrix filter, which rasterizes the text first and hence results in aliasing, set a larger font-size which expands the text as vector images described by the font before rasterizing when shrinking with the Matrix filter
• inspired by this, I discovered that setting an opaque background causes it to anti-alias almost perfectly (normal text is actually even better, but not by that much)

Results: http://jsfiddle.net/u2GUr/3/

(Click to enlarge)

Unfortunately I couldn't find any way to have a transparent background and still anti-alias, so I was forced to give everything stretched by the Matrix filter an opaque white background, and use the Chroma Filter to make the solid background color transparent.

Even better, every matrix-stretched element needs a dummy parent element whose sole purpose is to have the Chroma filter set on it, not because you can't have multiple filters on the same element (you can), but because all filters are set via the same filter property, which breaks cascading. (If the Chroma filter were set on the element directly rather than on a parent, setting the Matrix filter would override the filter property and hence remove the Chroma filter. If only they were separate chroma-filter and matrix-filter properties, so if an ancestor element is changed, the CSS rules applying to the element can change the Chroma filter without affecting the Matrix filter.)

This means pages that want to give their MathQuill textbox a background color besides white, and support any IE <9, need a CSS rule giving all .mathquill-rendered-math .matrixed elements that same background color, and then another rule giving all .mathquill-rendered-math .matrixed-container elements a Chroma filter for that color (may change to .mq-matrixed and .mq-matrixed-container in v0.3).

(Internal note: this then necessitates .selected .matrixed, .selected .matrixed-container's background rule, and all such similar rules, being !important, since it is likely to have lower specificity than the external rule setting the background color of the .matrixed. Again, problems that cascading and inheritance are supposed to solve.)

Transparent background attempts: http://jsfiddle.net/9V5Gs/2/

(Click to enlarge)