Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
unicode-bidi

unicode-bidi

Overrides the text direction set by 'Unicode'. This property is mainly used to control text display direction on pages that include RTL (right-to-left) languages such as Arabic or Hebrew.

Sample Code

style.css

/* normal: apply the Unicode text direction as-is (initial value) */
div.test { unicode-bidi: normal;}

/* embed: add the direction specified by the direction property */
div.test2 { direction: rtl; unicode-bidi: embed;}

/* bidi-override: completely override the Unicode text direction */
div.test3 { direction: rtl; unicode-bidi: bidi-override;}

/* Practical example: Arabic paragraph on a multilingual page */
.arabic { direction: rtl; unicode-bidi: embed;}

/* Enforce left-to-right in a mixed-language page */
.mixed-ltr { direction: ltr; unicode-bidi: embed;}

Available Values

Value	Description
normal	Applies the text direction set by 'Unicode' as-is. This 'normal' is the initial value.
embed	Adds the value specified by the 'direction' property on top of the text direction set by 'Unicode'.
bidi-override	Disables all text direction settings defined by 'Unicode' and forcibly applies the value specified by the 'direction' property.

Browser Compatibility

Desktop

Chrome

2+ ○

1 and earlier ×

Firefox

1+ ○

Safari

1.3+ ○

Edge

12+ ○

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

9.2+ ○

8 and earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 and earlier ×

Chrome Android

Latest ○

Same support as desktop

Firefox Android

Latest ○

Same support as desktop

※ Version data is based on MDN.

Details

Overrides the text direction set by 'Unicode'.

'Unicode' is a character set that covers nearly all languages, including Japanese, English, Russian, and Chinese. It contains information about text direction, and the 'unicode-bidi' property allows you to override that direction information.

The 'unicode-bidi' property is mainly used when you want to reflect the value specified by the 'direction' property (which specifies the text direction). Behavior may vary by browser, but specifying 'bidi-override' for 'unicode-bidi' generally allows the value set by the 'direction' property to be applied.

If you find any errors or copyright issues, please contact us.

Home