W3cubDocs

/SVG

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> 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 also has a CSS property counterpart: writing-mode. When both are specified, the CSS property takes priority.

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

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`writing-mode`	488	1212	41 Firefox 42 added support for bidirectional and RTL scripts in vertical modes.	3515	10.15.1	4818	41 Firefox for Android 42 added support for bidirectional and RTL scripts in vertical modes.	3514	10.35	5.01.0	483	10.35

writing-mode

Usage notes

Specifications

Browser compatibility

See also