現在 CSS3 ドラフト仕様にあるwriting-modeを使用すると、propriety プロパティを使用せずにテキストの回転を実現できます。これにより、より多くのブラウザーが CSS3 ドラフト仕様を採用するにつれて、この概念が効果的に証明されます。
p { writing-mode: tb-rl; }
これは非常に単純な CSS テクニックであり、最終的にはすべてのブラウザーで CSS3 のサポートが向上するにつれて機能します。これは、IE で CSS3 がサポートする数少ないプロパティの 1 つです。tb-rl 値は、テキストが上から下、右から左に流れる段落を表示するようブラウザに指示します。基本的に、テキストを時計回りに 90 度回転させ、右に揃えます。
このプロパティの真意は、日本語の右から左、アラビア語とヘブライ語を右から左、上から下 (rl-tb) で表示するなど、他の言語を正しい「書記モード」で表示することです。
サポート
現時点では、IE は IE5.5 以降でサポートされている唯一のブラウザーです。IE5.5+ から利用できる 4 つの値と、-ms 拡張子を介した IE8+ 用の追加の 4 つの値があります。
- lr-tb – これはデフォルト値で、左から右、上から下です
- rl-tb – テキストを右から左、上から下にフローします。
- tb-rl – テキストを上から下、右から左に垂直にフローします。
- bt-rl – 下から上、右から左
- tb-lr – この値と次の値は、-ms-writing-mode を使用して IE8+ でのみ使用できます。テキストは上から下、左から右に流れます
- bt-lr – 下から上、左から右
- lr-bt – 左から右、下から上
- rl-bt – 右から左、下から上
他のブラウザでテキストを回転しますか?
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
オンラインデモ
-ms-writing-mode プロパティ