Widely available 安全に使用可能。日本語の縦書きレイアウトで必須のプロパティ。
タイポグラフィ Widely available

text-orientation

text-orientation は writing-mode が vertical のときに使用し、文字を正立（upright）のまま表示するか、横に倒す（sideways）かを指定する。日本語の縦書きで英数字の向きを制御するのに特に重要。mixed（デフォルト）は CJK 文字を正立、ラテン文字を横転にする。

国際化縦書き

概要

text-orientation は writing-mode が vertical のときに使用し、文字を正立（upright）のまま表示するか、横に倒す（sideways）かを指定する。日本語の縦書きで英数字の向きを制御するのに特に重要。mixed（デフォルト）は CJK 文字を正立、ラテン文字を横転にする。

対応ブラウザ

デスクトップ

Chrome 48+
Edge 79+
Safari 14+
Firefox 41+

モバイル

Chrome Android 48+
Safari iOS 14+
Firefox Android 41+

基本構文

CSS 
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* デフォルト */
}

/* すべての文字を正立に */
.upright {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

実務での使いどころ

  • 日本語の縦書きレイアウト

    小説や記事の縦書き表示で、英数字の向きを適切に制御する。

注意点

  • writing-mode が横書きの場合、text-orientation は効果がない。

アクセシビリティ

  • 縦書きコンテンツでも論理的な読み順が保たれるよう、HTML のマークアップ順序に注意する。

参考リンク