๐Ÿ”ก unicode-bidi โ€” Controlling Bidirectional Text Rendering in CSS

๐ŸŒ What is unicode-bidi?

The unicode-bidi property controls how the browser handlesbidirectional (BiDi) text โ€” text that mixes left-to-right (LTR) and right-to-left (RTL) scripts in the same line, such as English + Arabic.

>>โ€œunicode-bidi lets you override the natural BiDi algorithm to fix mixed-direction text.โ€

Note

โœ” Works together with direction
โœ” Useful for multilingual UIs and data fields
โœ” Advanced property โ€” used only when the normal behavior breaks

๐ŸŽฏ Why Use unicode-bidi?

  • Fix messy ordering in mixed LTR + RTL text
  • Force text to behave in a specific direction
  • Protect sensitive content like codes, IDs, numbers
  • Control embedding and isolation of directional contexts

๐Ÿ“Œ Syntax

unicode-bidi Syntax

unicode-bidi: normal | embed | isolate | bidi-override | isolate-override | plaintext;

๐Ÿ“ Values Explained

ValueMeaning
normalUses the browserโ€™s default bidirectional algorithm
embedCreates a nested directional context based on direction
isolateIsolates the text so its direction doesnโ€™t affect siblings
bidi-overrideForces characters to follow direction strictly, ignoring natural script direction
isolate-overrideCombination of isolate + override
plaintextEach separate segment follows its own script direction โ€” no merging

Note

๐Ÿง  Most common real-world values: embed, bidi-override, isolate.

๐Ÿงช Example 1 โ€” Mixed Text Rendering Problem

Consider English mixed with Arabic without control:

HTML

<p>Hello ุงู„ุณู„ุงู… ุนุงู„ู…</p>

The browser may reorder punctuation or numbers unexpectedly.

๐Ÿงช Example 2 โ€” Using embed

embed Example

.embed {
  direction: rtl;
  unicode-bidi: embed;
}

HTML

<p class="embed">Hello 123 ุนุงู„ู…</p>

Creates a consistent nested RTL context inside the element.

๐Ÿงช Example 3 โ€” Using bidi-override

Override Example

.override {
  direction: rtl;
  unicode-bidi: bidi-override;
}

HTML

<p class="override">Hello123</p>

This forces characters to be displayed strictly in RTL order (even English letters are reversed).

๐Ÿงช Example 4 โ€” Using isolate

isolate Example

.isolated {
  unicode-bidi: isolate;
}

HTML

<div>Arabic: ู…ุฑุญุจุง <span class="isolated">123-ABC</span></div>

The isolated span prevents the numbers from affecting surrounding Arabic text.

๐Ÿงช Example 5 โ€” isolate-override

isolate-override Example

.iso-override {
  direction: rtl;
  unicode-bidi: isolate-override;
}

HTML

<p class="iso-override">CSS12345</p>

Text is isolated AND forced to follow RTL strictly.

๐Ÿงช Example 6 โ€” plaintext

plaintext Example

.plain {
  unicode-bidi: plaintext;
}

HTML

<p class="plain">Hello ุนุงู„ู… 123</p>

Each script (English, Arabic, numbers) retains its own direction โ€” no merging.

๐Ÿง  When Should You Use unicode-bidi?

  • When mixed RTL/LTR text renders incorrectly
  • When UI fields must preserve input order (IDs, codes, passwords)
  • When embedding isolated RTL text inside LTR context
  • When writing bilingual interfaces
  • When correcting misbehavior of numbers in RTL layout

โš ๏ธ Common Mistakes

  • โŒ Using unicode-bidi alone without setting direction
  • โŒ Applying bidi-override unnecessarily (reverses text!)
  • โŒ Assuming plaintext works like isolate (it behaves differently)
  • โŒ Overusing BiDi controls โ†’ makes layout harder to maintain

Note

๐Ÿ’ก Always test on real RTL languages โ€” browser rendering can vary slightly.

๐Ÿ”ฅ Summary

unicode-bidi is a powerful property used to take fine-grained control of how bilingual or bidirectional text is displayed. When the natural Unicode BiDi algorithm fails or becomes unpredictable, unicode-bidi ensures your text flows exactly how you intend.

>>โ€œWhen working with RTL languages, unicode-bidi is your ultimate debugging tool.โ€

Learn more โ†’MDN Docs ๐Ÿ“˜