Поверните текст в IE, без проблем

Question

Я бы хотел повернуть текст на 90 градусов против часовой стрелки. Firefox и Chrome не проблема, используя:

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

Для Internet Explorer это должна быть строка, насколько я знаю:

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

(Другой метод, режим письма , позволяет поворачивать текст только по часовой стрелке на 90 градусов).

Однако в IE повернутый текст выглядит как плохо масштабированное изображение на своей стороне (сравнение ниже).

Firefox / Chrome - против Internet Explorer:

Есть ли способ, которым Internet Explorer может вращать текст более элегантным способом (возможно, Javascript / jQuery)? Я был в Google, но я могу найти только больше ссылок на этот метод ...

Answer 1

Это Def движка рендеринга текста в IE; однако это выполнимо.

filter: требует, чтобы элемент имел layout (т.е. zoom). Вы можете преодолеть проблему рендеринга (большую часть времени), придав элементу цвет фона. Попробуйте следующее на вашем примере:

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

Answer 2

RenderEngine для IE ужасен ... Я бы попробовал работать с фоновыми изображениями. Возможно, Замена шрифта , как Cufon , будет лучше. Cufon генерирует изображения вашего текста. Насколько я знаю, хорошо работает в IE.

Answer 3

Я бы предложил либо Google Fonts API, либо Cufon (как сказал @swishmiller), или отключить сглаживание (ClearType) в IE, чтобы шрифты всегда выглядели безгласными (это слово)?

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

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

Отключить 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);

[править] Следует отметить, что я не пробовал исправить Google Font API ...

Answer 4

Попробуйте свойство -ms-writing-mode: http://msdn.microsoft.com/en-in/library/ie/ms531187%28v=vs.85%29.aspx