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.

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
writing-mode

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報