Layout direction overrideBaseline · Widely available

The unicode-bidi and direction CSS properties override the Unicode layout algorithm. They are intended for Document Type Definition (DTD) designers. For HTML documents, you should use the dir global HTML attribute and <bdo> HTML element instead.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jan 15, 2020. Widely available since Jul 15, 2022.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–47Not supported

48+Supportedsince Jan 20, 2016

Current: 155

Edge

12–18Not supported

79+Supportedsince Jan 15, 2020

Current: 154

Firefox

1–49Not supported

50+Supportedsince Nov 15, 2016

Current: 157

Safari

1–10.1Not supported

11+Supportedsince Sep 19, 2017

Current: 27

MobileChrome Android

18–47Not supported

48+Supportedsince Jan 26, 2016

Current: 155

Firefox Android

4–49Not supported

50+Supportedsince Nov 15, 2016

Current: 157

Safari iOS

1–10.3Not supported

11+Supportedsince Sep 19, 2017

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: direction.

Feature detection

CSS · check before using

@supports (direction: initial) {
  /* styles that rely on direction */
}

/* or in JavaScript */
if (CSS.supports("direction", "initial")) {
  // use it
}

Documentation (MDN)

Specification

Sub-features

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

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
direction	2	12	1	1	18	4	1
direction.ltr	2	12	1	1	18	4	1
direction.rtl	2	12	1	1	18	4	1
unicode-bidi	2	12	1	1.3	18	4	1
unicode-bidi.bidi-override	2	12	1	1.3	18	4	1
unicode-bidi.embed	2	12	1	1.3	18	4	1
unicode-bidi.isolate	48	79	50	11	48	50	11
unicode-bidi.isolate-override	48	79	50	11	48	50	11
unicode-bidi.normal	2	12	1	1.3	18	4	1
unicode-bidi.plaintext	48	79	50	11	48	50	11