writing-mode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

writing-mode 属性は、 <text> 要素の最初のインライン進行方向が左から右、右から左、上から下のいずれであるかを指定します。 writing-mode 属性は <text> 要素にのみ適用されます。 <tspan>, <tref>, <altGlyph>, <textPath> サブ要素には無視されます。 (なお、インライン進行方向は、 Unicode 双方向アルゴリズムとプロパティ direction および unicode-bidi により、 <text> 要素内で変更される可能性があることに注意してください)。

メモ: プレゼンテーション属性なので、 writing-mode は CSS プロパティとして使用することができます。詳しくは CSS の writing-mode プロパティを参照してください。

プレゼンテーション属性として、どの要素にも適用できますが、 <altGlyph>, <text>, <textPath>, <tref>, <tspan> の 5 つの要素にのみ効果があります。

使用上の注意

既定値 horizontal-tb
horizontal-tb | vertical-rl | vertical-lr
アニメーション可能 はい
horizontal-tb

この値はブロックのフロー方向を上から下に定義します。書字方向と文字の方向は共に水平方向です。

vertical-rl

この値はブロックのフロー方向を右から左に定義します。書字方向と文字の方向は共に垂直方向です。

vertical-lr

この値はブロックのフロー方向を左から右に定義します。書字方向と文字の方向は共に垂直方向です。

仕様書

Specification
CSS Writing Modes Level 4
# block-flow
Scalable Vector Graphics (SVG) 2
# WritingModeProperty

ブラウザーの互換性

関連情報