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

writing-mode SVG 1.1 values

SVG 1.1 固有の writing-mode 値はレガシーな方向指定であり、CSS標準の horizontal-tb、vertical-rl、vertical-lr に置き換えられています。古いSVGコンテンツとの互換性のために存在しますが、新規開発ではCSS標準値の使用が推奨されます。既存のSVGコンテンツの維持・移行の際に理解が必要です。

レガシーSVG互換

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.writing-mode.lr
非推奨
48
12
43
10.1
48
10.3
CSS プロパティ
lr-tb
非推奨
48
12
43
10.1
48
10.3
rl
非推奨
48
12
43
10.1
48
10.3
rl-tb
非推奨
48
12
43
10.1
48
10.3
tb
非推奨
48
12
43
10.1
48
10.3
tb-rl
非推奨
48
12
43
10.1
48
10.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
/* Legacy SVG 1.1 values */
text { writing-mode: tb; }
/* Recommended CSS standard values */
text { writing-mode: vertical-rl; }

ライブデモ

Vertical-rl (recommended)

CSS Vertical-rl (recommended) demo.

プレビュー全画面表示

vertical-lr

CSS Vertical-lr demo.

プレビュー全画面表示

Tb (legacy-)

CSS Tb (legacy-) demo.

プレビュー全画面表示

実務での使いどころ

  • レガシーSVGの互換性維持

    SVG 1.1 で作成された既存コンテンツの表示を維持しつつ、段階的にCSS標準値へ移行します。

注意点

  • SVG 1.1 の writing-mode 値はレガシーであり、新規プロジェクトでは horizontal-tb、vertical-rl、vertical-lr を使用してください。

アクセシビリティ

  • writing-mode の変更はテキストの読み方向に影響するため、スクリーンリーダーが正しく読み上げられることを確認してください。

参考リンク