writing-mode SVG 1.1 valuesLimited availability

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.

Not yet supported in all major browsers — check the table and provide a fallback.

Discouraged: SVG 1.1 writing modes are superseded by CSS writing-mode values. Use instead: writing-mode

How to use ↓Compare browsers

Browser support

DesktopChrome

1–47Not supported

48+Supportedsince Jan 20, 2016

Current: 155

Edge

12+Supportedsince Jul 29, 2015

Current: 154

Firefox

1–42Not supported

43+Supportedsince Dec 15, 2015

Current: 157

Safari

1–10Not supported

10.1+Supportedsince Mar 27, 2017

Current: 27

MobileChrome Android

18–47Not supported

48+Supportedsince Jan 26, 2016

Current: 155

Firefox Android

4–42Not supported

43+Supportedsince Dec 15, 2015

Current: 157

Safari iOS

1–10Not supported

10.3+Supportedsince Mar 27, 2017

Current: 27

How to use

Support is still inconsistent across browsers. Use feature detection and test carefully.

Example

Full syntax and examples are on MDN — see the links below.

Feature detection

CSS · check before using

@supports (writing-mode: lr) {
  /* styles that rely on writing-mode: lr */
}

/* or in JavaScript */
if (CSS.supports("writing-mode", "lr")) {
  // use it
}

Specification

drafts.csswg.org#block-flow ↗

Sub-features

Support for each part of the feature (6). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
writing-mode.lr	48	12	43	10.1	48	43	10.3
writing-mode.lr-tb	48	12	43	10.1	48	43	10.3
writing-mode.rl	48	12	43	10.1	48	43	10.3
writing-mode.rl-tb	48	12	43	10.1	48	43	10.3
writing-mode.tb	48	12	43	10.1	48	43	10.3
writing-mode.tb-rl	48	12	43	10.1	48	43	10.3