glyph-orientation-vertical
縦書きレイアウトにおけるグリフの回転方向を制御するプロパティです。日本語や中国語などのCJKテキストの縦書き表示で、文字の向きを正しく設定する必要がある場合に使用されます。ただし、現在はtext-orientationプロパティに置き換えられつつあります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
glyph-orientation-vertical 非推奨 | | | | 4 | | 3.2 |
基本構文
CSS
.vertical-text {
writing-mode: vertical-rl;
glyph-orientation-vertical: 0deg;
}ライブデモ
実務での使いどころ
-
縦書き文書の文字方向制御
縦書きの日本語文書で、英数字やラテン文字の表示方向を制御して読みやすさを確保します。
注意点
- このプロパティは非推奨であり、代わりにtext-orientationプロパティの使用が推奨されています。Safariのみの対応です。
アクセシビリティ
- 縦書きテキストの向きが正しくないとスクリーンリーダーでの読み上げ順序に影響する場合があるため、論理的な順序を確認してください。