W3docs
en
Log in

CSS unicode-bidi Property

The unicode-bidi CSS property controls the text embedding. This property works only with the direction property. See the Syntax & Practice with examples

The unicode-bidi property specifies the behavior of bidirectional text in a document.

The unicode-bidi property allows authors to override the Unicode algorithm and control text embedding. It is primarily used by web developers to manage how mixed-direction text is rendered.

Info

This property works only with the direction property.

Initial Valuenormal
Applies toAll elements, though some values have no effect on non-inline elements.
InheritedYes.
AnimatableNo.
VersionCSS2
DOM Syntaxobject.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:

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:

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

ValueDescription
normalDoes not suggest an additional level of embedding.
embedOpens an additional level of embedding in case the element is inline.
bidi-overrideCreates an override for an inline element. For block container elements this value creates an override for inline-level descendants.
isolateThe 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-overrideApplies the isolation behavior to the surrounding content and the override behavior to the inner content.
plaintextThis value behaves as isolate value but the directionality is calculated using the P2 and P3 rules of the Unicode Bidirectional Algorithm.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Practice

Practice

The unicode-bidi