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>, <altGlyph> 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.
As a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altGlyph>, <text>, <textPath>, <tref>, and <tspan>
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 | Status | Comment |
|---|---|---|
| CSS Writing Modes Module Level 3 The definition of 'writing-mode' in that specification. |
Proposed Recommendation | Definition in CSS Writing Modes 3 |
| Scalable Vector Graphics (SVG) 2 The definition of 'writing-mode' in that specification. |
Candidate Recommendation | Mainly refers to the definition in CSS Writing Modes 3 and defines a mapping between the deprecated SVG 1.1 values and the new values. |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'writing-mode' in that specification. |
Recommendation | Initial definition |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
writing-mode | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Compatibility unknown
- Compatibility unknown