Layout direction override
Warning: Where possible, authors are encouraged to avoid using the direction CSS property and use the HTML dir global attribute instead.
The direction CSS property sets the direction of text, table and grid columns, and horizontal overflow. Use rtl for languages written from right to left (like Hebrew or Arabic), and ltr for those written from left to right (like English and most other languages).
Note that text direction is usually defined within a document (e.g., with HTML's dir attribute) rather than through direct use of the direction property.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 2 | 12 | 1 | 1 | 18 | 1 | |
ltr | 2 | 12 | 1 | 1 | 18 | 1 |
rtl | 2 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The unicode-bidi CSS property, together with the direction property, determines how bidirectional text in a document is handled. For example, if a block of content contains both left-to-right and right-to-left text, the user-agent uses a complex Unicode algorithm to decide how to display the text. The unicode-bidi property overrides this algorithm and… | 2 | 12 | 1 | 1.3 | 18 | 1 |
| CSS property | ||||||
bidi-override | 2 | 12 | 1 | 1.3 | 18 | 1 |
embed | 2 | 12 | 1 | 1.3 | 18 | 1 |
isolate | 48 | 79 | 50 | 11 | 48 | 11 |
isolate-override | 48 | 79 | 50 | 11 | 48 | 11 |
normal | 2 | 12 | 1 | 1.3 | 18 | 1 |
plaintext | 48 | 79 | 50 | 11 | 48 | 11 |
- Available with a vendor prefix: -webkit- (16)
- Before Chrome 47, `-webkit-isolate` could lock up the browser.
- Since Chrome 19, the syntax from a previous version of the specification, where the `isolate` keyword could be used together with `bidi-override`, is allowed.
- Available with a vendor prefix: -webkit- (79)
- This feature was removed in a later browser version (54)
- Available with a vendor prefix: -moz- (10)
- From Firefox 10 to Firefox 16 (inclusive), the `isolate` keyword could be used together with `bidi-override`, which was the syntax from a previous version of the specification. From Firefox 17, only one value is allowed. Use `isolate-override` instead the previous `isolate bidi-override`.
- Available with a vendor prefix: -webkit- (6)
- Before Safari 9, `-webkit-isolate` could lock up the browser.
- Available with a vendor prefix: -webkit- (6)
- Before Safari on iOS 9, `-webkit-isolate` could lock up the browser.
- This feature was removed in a later browser version (54)
- Available with a vendor prefix: -moz- (17)
- Available with a vendor prefix: -webkit- (7)
- Available with a vendor prefix: -webkit- (7)
- This feature was removed in a later browser version (54)
- Available with a vendor prefix: -moz- (10)
- Before Firefox 50, the `plaintext` value was ignored for vertical writing modes (bug 1302734).
- Before Firefox 15, `plaintext` didn't do anything to an inline element. The specification changed and the implementation was changed in Firefox 15.
- Available with a vendor prefix: -webkit- (6)
- Available with a vendor prefix: -webkit- (6)
Syntax
.rtl-text {
direction: rtl;
unicode-bidi: bidi-override;
}
.isolate {
unicode-bidi: isolate;
}Live demo
Use cases
-
Using Layout direction override
Warning:
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.