2011-02-04 8 views
15

テキストを反時計回りに90度回転したいと思います。 FirefoxとChromeは問題ありません、使用して:IEでテキストを回転させると、醜くなることはありません

-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のFirefox /クローム - 対 - インターネットエクスプローラー:Internet Explorer

Internet Explorerは、よりエレガントな方法(おそらくJavascriptを/ jQueryの)でテキストを回転することができる方法はありますか?私はグーグルで行ってきましたが、私はこのメソッドへのより多くの参照を見つけることができます...

+0

ことはあなたの最後の回転要素はピクセル整列されていることを確認します。 –

答えて

5

IEのRenderEngineはひどいです...私は背景画像で作業しようとします。多分フォント交換のようなCufonは、より良い仕事をするでしょう。 Cufonはあなたのテキストのイメージを生成します。私が知る限り、IEでうまく動作します。

+0

+1良い解決策と思われます... – gearsdigital

+0

スクリーンリーダーのようなアクセシビリティ補助を使用するユーザーにとっては、画像としてレンダリングされるテキストは難しいです。 –

+0

+1ありがとうございます。私はこのタイプの解決策を考えています。関数imagettftextを使うと、画像をレンダリングする角度を既に定義することができます。実際のイメージ(title.php)を使用しているかのように、別のファイルが必要です。アクセシビリティ補助については、このテキストはページのタイトル用です。これは対応するメニュー項目と同じです。このケースではそれほど大きな問題ではないと思います。 – RemiX

2

(@swishmillerが言ったように)私はGoogleのフォントAPIまたはCufonいずれかを示唆し、または IEでアンチエイリアシング(ClearTypeの)を無効にするので、フォントは常に平滑化されていない見て(その単語ですか)?

Googleのフォント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のフォントAPIの修正を試していませんでしたことを言及すべきである[編集] ...

+0

を使って色を変えることができないということです。ClearTypeを無効にすることは有望ですが、違いは見られませんでした。 –

+0

これは正式なコメントです。 - 2.5年 –

37

IEのテキストレンダリングエンジンを定義しています。しかし、それは実行可能です。

フィルタ:は、要素がのレイアウト(つまりズーム)であることが必要です。要素に背景色を付けることで、レンダリングの問題(ほとんどの場合)を打ち負かすことができます。あなたの例で次のように試してみてください。

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

+1少し助けてくれます。残念ながら、まだFirefoxやChromeほどクリーンではありません。 – RemiX

+0

:-)これは私たちがここで話しているIEです。このソリューションは機能しますが、独自の長所/短所があります。長所はすべて、アクセシビリティと、可能な限り少ないコード行を中心にしています。短所はすべてプレゼンテーションの周りを回ります。 – Dawson

+9

+1背景色を追加するとうまく動作します。それは混乱する前に、今読める。 Cufonなどで複雑なレイヤーを追加したくないのですが、 – Voodoo

関連する問題