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.

The writing-mode attribute specifies whether the initial inline-progression-direction for a <text> element shall be left-to-right, right-to-left, or top-to-bottom. The writing-mode attribute applies only to <text> elements; the attribute is ignored for <tspan>, <tref>, and <textPath> sub-elements. (Note that the inline-progression-direction can change within a <text> element due to the Unicode bidirectional algorithm and properties direction and unicode-bidi.)

Note: As a presentation attribute, writing-mode can be used as a CSS property. See the CSS writing-mode property for more information.

You can use this attribute with the following SVG elements:

Usage notes

Default value horizontal-tb
Value horizontal-tb | vertical-rl | vertical-lr
Animatable Yes
horizontal-tb

This value defines a top-to-bottom block flow direction. Both the writing mode and the typographic mode are horizontal.

vertical-rl

This value defines a right-to-left block flow direction. Both the writing mode and the typographic mode are vertical.

vertical-lr

This value defines a left-to-right block flow direction. Both the writing mode and the typographic mode are vertical.

Specifications

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

Browser compatibility

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.

See also