CSS unicode-bidi Property - Usage, Syntax, Examples

The unicode-bidi property controls how bidirectional (bidi) text — text that mixes left-to-right and right-to-left scripts — is laid out, letting you override the browser's built-in Unicode bidirectional algorithm.

Most pages never need it. Browsers already reorder mixed Latin/Arabic/Hebrew text correctly using the Unicode Bidirectional Algorithm. You reach for unicode-bidi only when that default is wrong: for example, when an isolated value (a phone number, a username, a price) leaks its direction into the surrounding sentence, or when you deliberately want to force a visual order.

In practice unicode-bidi is paired with the direction property: direction sets which way the text base runs, and unicode-bidi decides how strongly that base direction is applied. Together they are the CSS equivalent of the HTML dir attribute and the <bdo>/<bdi> elements.

Info

unicode-bidi only has a visible effect when the element also contains mixed-direction text. On its own it does nothing — it works hand in hand with the direction property.

Initial Value	normal
Applies to	All elements, though some values have no effect on non-inline elements.
Inherited	Yes.
Animatable	No.
Version	CSS2
DOM Syntax	object.style.unicodeBidi = "isolate";

Syntax

CSS unicode-bidi values

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

Example of the unicode-bidi property:

In the example below the .text block uses direction: rtl with unicode-bidi: embed. The Arabic phrase keeps its natural right-to-left order, while the embedding adds one extra bidi level so the whole block is treated as right-to-left — punctuation and the Latin words are positioned relative to that right-to-left base.

CSS unicode-bidi code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.text {
        direction: rtl;
        unicode-bidi: embed;
      }
    </style>
  </head>
  <body>
    <h2>Unicode-bidi property example</h2>
    <div>Normal writing direction. مرحبا بالعالم</div>
    <div class="text">Using "embed" value. مرحبا بالعالم</div>
  </body>
</html>

Try it Yourself »

Example of the unicode-bidi property with the "bidi-override" value:

bidi-override is the most aggressive value: it ignores the inherent direction of the characters and lays every character out strictly in the order set by direction. With direction: rtl below, even the Latin text is reversed character by character, so this value is mainly useful for special effects rather than real document text.

CSS unicode-bidi bidi-override example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.text {
        direction: rtl;
        unicode-bidi: bidi-override;
      }
    </style>
  </head>
  <body>
    <h2>Unicode-bidi property example</h2>
    <div>Normal writing direction. مرحبا بالعالم</div>
    <div class="text">Using "bidi-override" value. مرحبا بالعالم</div>
  </body>
</html>

Try it Yourself »

Values

Value	Description
normal	Does not suggest an additional level of embedding.
embed	Opens an additional level of embedding in case the element is inline.
bidi-override	Creates an override for an inline element. For block container elements this value creates an override for inline-level descendants.
isolate	The element is isolated from its siblings. This value specifies that the element’s container directionality should be calculated without considering the content of this element.
isolate-override	Applies the isolation behavior to the surrounding content and the override behavior to the inner content.
plaintext	This value behaves as isolate value but the directionality is calculated using the P2 and P3 rules of the Unicode Bidirectional Algorithm.
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.

Which value should you use?

Just embedding a phrase in the opposite direction? Use embed together with the matching direction. This is the classic "quote some Arabic inside an English paragraph" case.
Inserting user-generated text of unknown direction (a name, a comment, a search term)? Prefer isolate. It stops that snippet from flipping the direction of the words around it — the same protection the HTML <bdi> element gives.
plaintext is for content like chat messages or log lines where each paragraph should pick its own direction from its first strong character, instead of inheriting one from the page.
bidi-override should be rare. Use it only when you intentionally want to force visual order (for example mirroring text as an effect), because it overrides the natural reading order of every character.

Note that unicode-bidi is not animatable, so transitions and animations have no effect on it.

direction — sets the base text direction (ltr or rtl) that unicode-bidi builds on.
writing-mode — controls horizontal vs. vertical block flow.
text-align — aligns text within its line box, which often needs adjusting for RTL content.

Practice

The unicode-bidi

specifies the behavior of the bidirectional text in a document.allows to override the Unicode algorithm.allows to control the text embedding.is not an animatable property.