Rotate text in IE, without it getting ugly
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:
(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:
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.
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;
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
/* 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);
 I should mention that I've not tried the Google Font API fix...
Try -ms-writing-mode property: http://msdn.microsoft.com/en-in/library/ie/ms531187%28v=vs.85%29.aspx