Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
構文・カスケード Limited support

glyph-orientation-vertical

縦書きレイアウトにおけるグリフの回転方向を制御するプロパティです。日本語や中国語などのCJKテキストの縦書き表示で、文字の向きを正しく設定する必要がある場合に使用されます。ただし、現在はtext-orientationプロパティに置き換えられつつあります。

縦書きグリフ方向

概要

縦書きレイアウトにおけるグリフの回転方向を制御するプロパティです。日本語や中国語などのCJKテキストの縦書き表示で、文字の向きを正しく設定する必要がある場合に使用されます。ただし、現在はtext-orientationプロパティに置き換えられつつあります。

対応ブラウザ

デスクトップ

Chrome 未対応
Edge 未対応
Safari 4+
Firefox 未対応

モバイル

Chrome Android 未対応
Safari iOS 3.2+
Firefox Android 未対応

基本構文

CSS 
.vertical-text {
  writing-mode: vertical-rl;
  glyph-orientation-vertical: 0deg;
}

実務での使いどころ

  • 縦書き文書の文字方向制御

    縦書きの日本語文書で、英数字やラテン文字の表示方向を制御して読みやすさを確保します。

注意点

  • このプロパティは非推奨であり、代わりにtext-orientationプロパティの使用が推奨されています。Safariのみの対応です。

アクセシビリティ

  • 縦書きテキストの向きが正しくないとスクリーンリーダーでの読み上げ順序に影響する場合があるため、論理的な順序を確認してください。

参考リンク