writing-mode SVG 1.1 values

概要

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

対応ブラウザ

基本構文

/* レガシー SVG 1.1 値 */
text { writing-mode: tb; }
/* 推奨 CSS 標準値 */
text { writing-mode: vertical-rl; }

実務での使いどころ

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

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

注意点

アクセシビリティ

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

参考リンク

• MDN Web Docs — writing-mode SVG 1.1 values