Layout direction override
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.
Overview
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.
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
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.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features