writing-mode
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.
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 | 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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
writing-mode |
? |
? |
? |
? |
? |
? |
? |
? |
? |
? |
? |
? |
See also
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/writing-mode