writing-mode SVG 1.1 values
The lr, lr-tb, rl, rl-tb, tb, and tb-rl keyword values for the writing-mode CSS property set the text direction for elements in SVG 1.1 documents. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The lr, lr-tb, rl, rl-tb, tb, and tb-rl keyword values for the writing-mode CSS property set the text direction for elements in SVG 1.1 documents. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.writing-mode.lr Deprecated | 48 | 12 | 43 | 10.1 | 48 | 10.3 |
| CSS property | ||||||
lr-tb Deprecated | 48 | 12 | 43 | 10.1 | 48 | 10.3 |
rl Deprecated | 48 | 12 | 43 | 10.1 | 48 | 10.3 |
rl-tb Deprecated | 48 | 12 | 43 | 10.1 | 48 | 10.3 |
tb Deprecated | 48 | 12 | 43 | 10.1 | 48 | 10.3 |
tb-rl Deprecated | 48 | 12 | 43 | 10.1 | 48 | 10.3 |
Syntax
/* Legacy SVG 1.1 values */
text { writing-mode: tb; }
/* Recommended CSS standard values */
text { writing-mode: vertical-rl; }Live demo
Use cases
Use writing-mode SVG 1.1 values
Use writing-mode SVG 1.1 values when the default CSS behavior is not expressive enough for the component or layout you are building.
Handle edge cases
Apply writing-mode SVG 1.1 values to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test writing-mode SVG 1.1 values in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Confirm that using writing-mode SVG 1.1 values does not make content harder to perceive, understand, or operate in assistive contexts.
Related links
Powered by web-features