🔤 CSS unicode-bidi — Control Text Direction and Embedding
The unicode-bidi property works alongside the direction property to manage how bidirectional text is handled in HTML. It’s essential for properly displaying languages that use right-to-left (RTL) scripts like Arabic or Hebrew mixed with left-to-right (LTR) text.
🔹 What Does unicode-bidi Do?
It controls the embedding and override behavior of the bidirectional algorithm, determining how text with mixed directions (LTR & RTL) is displayed and ordered.
📘 Syntax
selector {
unicode-bidi: normal | embed | isolate | bidi-override | isolate-override | plaintext;
}
✅ Values Explained
| Value | Description |
|---|---|
normal | Default. No special handling; text direction follows direction property. |
embed | Embeds the element’s text in a new directional context. |
isolate | Isolates the element’s text direction, preventing influence from surrounding text. |
bidi-override | Overrides the bidirectional algorithm; text direction forced as per direction property. |
isolate-override | Combines isolate and bidi-override. |
plaintext | Makes the element behave like plain text for bidi purposes (used less often). |
🔧 Usage with direction
The unicode-bidi property must be used with direction to have effect:
.rtl-text {
direction: rtl;
unicode-bidi: embed;
}
✍️ Examples
1. Basic RTL Embedding
<p class="rtl-text">Hello مرحبا world!</p>
.rtl-text {
direction: rtl;
unicode-bidi: embed;
}
✅ The Arabic text is embedded properly within the LTR sentence.
2. Override Text Direction
.override-text {
direction: rtl;
unicode-bidi: bidi-override;
}
✅ Forces the entire text block to display RTL, ignoring logical text order.
🖼️ Image Idea: Mixed Direction Text
Show side-by-side examples of:
- Normal bidirectional text (default)
- Text with
unicode-bidi: embed+direction: rtl - Text with
unicode-bidi: bidi-override
Illustrate the flow of text and how the rendering differs.
💡 When to Use unicode-bidi
- Displaying mixed LTR and RTL languages in the same paragraph
- Handling quotes or embedded text with a different direction
- Controlling layout of complex scripts in multilingual websites
- Overriding browser’s default bidi algorithm when needed
✅ Summary
| Property | unicode-bidi |
|---|---|
| Purpose | Controls embedding and overriding of text direction |
| Must be used with | direction property |
| Common Values | normal, embed, bidi-override, isolate |
| Use cases | Bidirectional text handling, multilingual layouts |
🔚 Final Thought
unicode-bidi is a subtle but powerful CSS property that ensures your multilingual text displays correctly and elegantly — making your site accessible and readable worldwide.