CSS unicode-bidi Property

Definition and Usage

The unicode-bidi property works with direction to control how the Unicode bidirectional algorithm handles mixed left-to-right (LTR) and right-to-left (RTL) text.

The initial value is normal. It is not inherited. Values like embed, isolate, and bidi-override change embedding levels or force character order. Prefer the HTML dir attribute for everyday markup; use this property when you need precise embedding or isolation.

CSS Syntax

Examples: normal; · embed; · isolate; · bidi-override;

Property Values

How to Use unicode-bidi

Pair a keyword with direction (or HTML dir) on the element that needs special bidi handling.

1. Prefer HTML dir="ltr" / dir="rtl" for page or block direction when you can.
2. Set direction when CSS embedding or override is required.
3. Choose embed, isolate, or bidi-override for the behavior you need.
4. Test mixed LTR/RTL snippets (names, punctuation, numbers) visually.

Live Preview

Change unicode-bidi on the highlighted span. Direction stays rtl so override and embed are easy to compare.

CSS Examples

Each snippet focuses on unicode-bidi. direction is included only when the value needs it. Use Try It Yourself for a live editor.

<style>
  .quote {
    direction: rtl;
    unicode-bidi: embed;
  }
</style>

<p>English before <span class="quote">مرحبا Hello</span> after.</p>

<style>
  .forced {
    direction: rtl;
    unicode-bidi: bidi-override;
  }
</style>

<p>Stored as ABCDEF: <span class="forced">ABCDEF</span></p>

<style>
  .name {
    direction: rtl;
    unicode-bidi: isolate;
  }
</style>

<p>User: <span class="name">علي</span> (online)</p>

Key Takeaways