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:          


        

Answer 1

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 2

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 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...

Answer 4

Try -ms-writing-mode property: http://msdn.microsoft.com/en-in/library/ie/ms531187%28v=vs.85%29.aspx