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

text-orientation

text-orientation は CSS のプロパティで、行内のテキストの向きを設定します。このプロパティは縦書きのテキスト (writing-mode が horizontal-tb 以外の場合) でのみ効果があります。これは縦書きを使用する言語の表示を制御したり、縦書きの表見出しを作成したりするのに有用です。

国際化縦書き

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
text-orientation
48
79
41
14
48
14
mixed
48
79
41
≤13.1
48
≤13.4
sideways
12
79
44
7
18
7
upright
12
79
41
≤13.1
18
≤13.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (79)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5.1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5)
注釈 1件
対応条件
  • 以前は別名で対応していました: sideways-right (≤83)
注釈 1件
対応条件
  • 以前は別名で対応していました: sideways-right (≤83)
注釈 1件
対応条件
  • 以前は別名で対応していました: sideways-right (≤72)
注釈 1件
対応条件
  • 以前は別名で対応していました: sideways-right (≤83)

基本構文

CSS 
.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* Default */
}

/* Set all characters to upright */
.upright {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

ライブデモ

Mixed(default)

text-orientation Mixed(default) demo.

プレビュー全画面表示

Upright(positive)

text-orientation Upright(positive) demo.

プレビュー全画面表示

Sideways(horizontal)

text-orientation Sideways(horizontal) demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク