Skip to content
Han Wei edited this page Jun 22, 2012 · 5 revisions

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](http://msdn.microsoft.com/en-us/library/ms533014(v=VS.85%29.aspx) 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. 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 (may change to .mq-matrixed in v0.3) elements that same background color.

(Internal note: this necessitated .selected .matrixed's background rule being !important, since it is likely to have lower specificity than the external rule setting the background color of the .matrixed.)

Transparent background attempts: http://jsfiddle.net/9V5Gs/2/ (Click to enlarge)

Clone this wiki locally