Widely available 安全に使用可能。縦書きレイアウトや垂直テキストの実装に必須。

writing-mode

writing-mode は CSS のプロパティで、テキストの行のレイアウトを横書きにするか縦書きにするか、ブロックのフロー方向を左向きにするか右向きにするかを設定します。文書全体に設定する場合は、ルート要素 (HTML 文書の場合は html 要素) に設定してください。

国際化縦書き

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
writing-mode
48
12
41
10.1
48
10.3
horizontal-tb
48
12
43
9
48
9
sideways-lr
132
132
43
18.4
132
18.4
sideways-rl
132
132
43
18.4
132
18.4
vertical-lr
48
12
43
9
48
9
vertical-rl
48
12
43
9
48
9
その他
svg.global_attributes.writing-mode

writing-mode 属性は、 text 要素の最初のインライン進行方向が左から右、右から左、上から下のいずれであるかを指定します。 writing-mode 属性は 要素にのみ適用されます。 、 サブ要素には無視されます。（なお、インライン進行方向は、 Unicode 双方向アルゴリズムとプロパティ および により、 要素内で変更される可能性があることに注意してください。）
48
12
41
10.1
48
10.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (8)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 1件
実装メモ
  • Firefox 42 では、垂直モードでの双方向スクリプトと RTL スクリプトのサポートが追加されました。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5.1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (8)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (12)
注釈 1件
実装メモ
  • Firefox 42 では、垂直モードでの双方向スクリプトと RTL スクリプトのサポートが追加されました。
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5.1)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5)

基本構文

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

/* Sidebar label */
.sidebar-label {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

ライブデモ

Vertical-rl(vertical writingright->left)

writing-mode Vertical-rl(vertical writingright->left) demo.

プレビュー全画面表示

Vertical-lr(vertical writingleft->right)

writing-mode Vertical-lr(vertical writingleft->right) demo.

プレビュー全画面表示

sidebarlabel

writing-mode sidebarlabel demo.

プレビュー全画面表示

実務での使いどころ

  • 縦書きコンテンツ

    日本語の小説や詩などを縦書きで表示し、伝統的な読書体験を提供する。

  • 垂直ラベル

    サイドバーやタブのラベルを垂直に配置し、スペースを有効活用する。

注意点

  • writing-mode を変更するとレイアウトの軸が変わるため、width / height や margin / padding の解釈も変わる。論理プロパティの使用を推奨。

アクセシビリティ

  • 縦書きコンテンツでもキーボードナビゲーションが正しく動作するか確認すること。

参考リンク