Girar texto en IE, sin que se ponga feo

Question

Me gustaría rotar un texto 90 grados en el sentido contrario a las agujas del reloj. Firefox y Chrome no son un problema, usando:

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

Para Internet Explorer, debe ser esta línea, por lo que yo sé:

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

(El otro método, escritura en modo, solo puede rotar el texto en el sentido de las agujas del reloj 90 grados).

Sin embargo, en IE, el texto girado se ve como una imagen mal escalada de un lado (comparación más abajo).

Firefox/Chrome - vs - Internet Explorer:

¿Hay alguna forma en que Internet Explorer puede girar el texto de una manera más elegante (posiblemente Javascript/jQuery)? He estado buscando en Google, pero solo puedo encontrar más referencias a este método ...

Answer 1

RenderEngine de IE es horrible ... Intentaría trabajar con imágenes de fondo. Tal vez un reemplazo de fuente como Cufon haría un mejor trabajo. Cufon genera imágenes de tu texto. Funciona bien en IE hasta donde yo sé.

Answer 2

sugeriría cualquiera API de Google o Fuentes Cufon (como se dijo @swishmiller), o desactivación del componente Anti-Aliasing (ClearType) en IE por lo que las fuentes siempre se ven sin filtrar (es que una palabra)?

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

Cufón: http://cufon.shoqolate.com/generate/

Desactivar 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); 

[editar] Debo mencionar que no he probado la solución Google Font API ...

Answer 3

Defina el motor de representación de texto en IE; sin embargo, es factible.

filtro: requiere que el elemento tenga diseño (es decir, zoom). Puede superar el problema de renderizado (la mayoría de las veces), dando al elemento un color de fondo. Pruebe lo siguiente en el ejemplo:

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

Answer 4

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