The unicode-bidi property helps browsers render mixed-direction text correctly — essential for Arabic, Hebrew, and English on the same page.
RTL + LTR mix.
Pair together.
New level.
Separate context.
LTR in RTL UI.
Global sites.
The unicode-bidi property in CSS is used to control the directionality and handling of text within an element. It primarily affects the bidirectional algorithm in text rendering, which is crucial for correctly displaying languages that are written from right to left (RTL) or mixed directionality.
Use unicode-bidi together with the direction property when you need fine control over how mixed scripts are ordered on screen. For whole-page direction, setting dir="rtl" on <html> or using direction is often enough; unicode-bidi helps with embedded snippets.
Most day-to-day layouts use direction: rtl or direction: ltr. Reach for unicode-bidi when a small piece of opposite-direction text appears inside a paragraph and reads in the wrong order.
The syntax for the unicode-bidi property is simple. It accepts one of the following values:
element {
unicode-bidi: normal | embed | isolate | bidi-override | isolate-override | plaintext;
}.rtl {
unicode-bidi: embed;
direction: rtl;
}direction: ltr or direction: rtl.embed and isolate are the most common values for mixed text.bidi-override forces direction and should be used carefully.direction — sets base text direction (ltr or rtl)writing-mode — controls vertical vs horizontal writingtext-align — horizontal alignment of textThe default value of unicode-bidi is normal, which means the element follows the normal bidirectional behavior of its context.
| Question | Answer |
|---|---|
| Default value | normal |
| RTL block | unicode-bidi: embed; direction: rtl; |
| Inline snippet | unicode-bidi: isolate; |
| LTR email in RTL page | unicode-bidi: isolate; direction: ltr; |
| Usually paired with | direction |
| Inherited | No |
The unicode-bidi property accepts keyword values that control bidirectional formatting.
| Value | Example | Description |
|---|---|---|
normal | unicode-bidi: normal; | Inherit directional behavior from the normal bidi layout rules. |
embed | unicode-bidi: embed; | Establish a new embedding level for bidirectional text. |
isolate | unicode-bidi: isolate; | Create an independent directional formatting context. |
bidi-override | unicode-bidi: bidi-override; | Force the directionality of the element’s text. |
isolate-override | unicode-bidi: isolate-override; | Combines isolate and bidi-override in one isolated context. |
plaintext | unicode-bidi: plaintext; | Determine direction from the first strong character in the text. |
normal embed isolate bidi-override plaintextunicode-bidi is helpful in international and multilingual interfaces:
Same mixed text with default flow vs embed + direction: rtl:
In this example, we’ll use the unicode-bidi property to manage the directionality of a paragraph containing mixed-direction text.
Combine unicode-bidi with direction for blocks and inline mixed-direction text.
In this example, we’ll use the unicode-bidi property to manage the directionality of a paragraph containing mixed-direction text.
<style>
.rtl {
unicode-bidi: embed;
direction: rtl;
border: 1px solid #000;
padding: 10px;
}
</style>
<div class="rtl">
<p>مرحبا بالعالم Hello World</p>
</div>embed creates a new bidi level and direction: rtl sets the base direction so Arabic and English reorder correctly.
Wrap a short mixed-direction phrase so it does not disturb surrounding LTR text.
.quote {
unicode-bidi: isolate;
direction: rtl;
display: inline;
}isolate creates a separate formatting context so neighbors are not affected by the snippet’s direction rules.
Handle direction blocks and LTR data inside RTL interfaces.
Compare the same mixed string in LTR and RTL embedding contexts.
.ltr { unicode-bidi: embed; direction: ltr; }
.rtl { unicode-bidi: embed; direction: rtl; }The same characters can appear in different visual order depending on the base direction and bidi level.
Keep emails and usernames readable with isolate and direction: ltr inside an RTL layout.
.username {
unicode-bidi: isolate;
direction: ltr;
display: inline-block;
}Technical strings usually read LTR even on RTL pages. Isolating them prevents the @ symbol and numbers from jumping position.
lang="ar", lang="he", or lang="en" on elements so screen readers pronounce text correctly.<html dir="rtl"> for page-wide direction when appropriate.These two properties work together. direction sets the inline base direction; unicode-bidi controls how embedding levels and overrides are applied.
.rtl-block {
unicode-bidi: embed;
direction: rtl;
text-align: right;
}unicode-bidi WorksLTR and RTL characters appear in the same content.
Keywords like embed or isolate define formatting context.
Characters reorder for correct visual reading direction.
Users see text in the intended visual order.
The unicode-bidi property is supported in all major browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, older browser versions may have limited support or behave differently, so it’s advisable to test across different browsers if targeting a wide audience.
All major browsers implement the Unicode bidirectional algorithm with CSS unicode-bidi and direction.
Test RTL layouts with real Arabic or Hebrew content and verify numbers, URLs, and punctuation behave as expected.
Bottom line: unicode-bidi is well supported for international text on the modern web.
The unicode-bidi property is essential for correctly rendering text in languages that require bidirectional handling.
By understanding and utilizing this property, web developers can ensure that their web pages display text accurately and in accordance with the intended directionality of the content.
unicode-bidi with direction when neededisolate for emails, URLs, and usernames in opposite-direction UIlang and dir on <html> for page-level i18nembed or isolate over bidi-override for body textbidi-override casually on readable paragraphsdirection when using embedunicode-bidiUse these points when handling bidirectional text.
Text direction.
PurposeDefault value.
DefaultPair properties.
SyntaxInline snippets.
PatternRTL support.
Use caseOpen the HTML editor and test unicode-bidi with mixed Arabic and English text.
5 people found this page helpful