Unicode-bidi property
Last updated: 2026-09-13
unicode-bidi Unicode-bidi property
The unicode-bidi CSS property controls the Unicode Bidirectional Algorithm for text, handling cases where text of different directions (such as English and Arabic) is mixed. It can change the embedding level of text, override direction, or detach an element from its parent's direction context, making it a key property for complex text direction on internationalized sites.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
unicode-bidi: normal | embed | isolate | bidi-override | isolate-override | plaintext;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | embed | isolate | bidi-override | isolate-override | plaintext | Keyword | Bidirectional text handling modes |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| unicode-bidi | ✓ v10 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： isolate is the most commonly used value: it keeps the element's direction from affecting surrounding text and vice versa, which suits embedding third-party content.
Important： bidi-override forcibly reverses the text direction and can scramble the display order; unless you really need it, prefer isolate.
❓ FAQ
QHow do the unicode-bidi and direction properties relate to each other?
Adirection sets the writing direction of the text; unicode-bidi controls how that direction interacts with the surrounding text. The two are normally used together: direction specifies the direction and unicode-bidi specifies the isolation or override behavior.
QWhen do I need the unicode-bidi property for mixed-direction text?
AWhen a page mixes text of different directions (such as Arabic embedded in English), or when you need to embed third-party content without affecting the overall layout, use unicode-bidi: isolate to isolate the direction context.
QWhat is the difference between unicode-bidi: isolate and bidi-override?
Aisolate treats the element's internal bidirectional text as an independent paragraph so directions do not affect each other — ideal for embedded third-party or mixed-language content; bidi-override forces all character order according to direction, which easily scrambles the expected display and is only for special cases.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
