Rotate text in IE, without it getting ugly

Question

I'd like to rotate a text by 90 degrees counter-clockwise. Firefox and Chrome are no problem, using:

-webkit-transform-origin: top left;
-webkit-transform: rotate(-90deg);
-moz-transform-origin: top left;
-moz-transform: rotate(-90deg);

For Internet Explorer, it should be this line, as far as I know:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

(The other method, writing-mode, can only rotate text clockwise 90 degrees).

However, in IE the rotated text looks like a badly scaled image on its side (comparison below).

Firefox / Chrome -- vs -- Internet Explorer:

Is there any way that Internet Explorer can rotate the text in a more elegant way (possibly Javascript/jQuery)? I've been Googling, but I can only find more references to this method...

Answer 1

It is Def the text rendering engine in IE; however, it's doable.

filter: requires the element to have layout (ie. zoom). You can beat the rendering problem (most of the time), by giving the element a background color. Try the following on your example:

zoom:1;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
background-color:white;

Answer 2

The RenderEngine of IE is awful... I would try to work with background images. Maybe a Font Replacement like Cufon would do a better Job. Cufon generates Images of your Text. Works good in IE as far as i know.

Answer 3

I would suggest either Google Fonts API or Cufon (as @swishmiller said), or disabling Anti-Aliasing (ClearType) in IE so the fonts always look unsmoothed (is that a word)?

Google Font API: http://code.google.com/webfonts

Cufon: http://cufon.shoqolate.com/generate/

Disable ClearType:

    /* This will force IE into thinking there is a filter actually doing something, so it'll disable ClearType */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);

[edit] I should mention that I've not tried the Google Font API fix...