CSS unicode-bidi Property

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

The unicode-bidi property allows to override the Unicode algorithm and control the text embedding. The unicode-bidi property should not be overridden by users, authors, and web designers. It should commonly be used by DTD designers.

This property works only with the direction property.

The unicode-bidi and the direction properties are the only properties that are not affected by all 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

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

Example of the unicode-bidi property:

<!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>

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

<!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>

Values

Value Description Play it
normal Does not suggest an additional level of embedding. Play it »
embed Opens an additional level of embedding in case the element is inline. Play it »
bidi-override Creates an override for an inline element. For block container elements this value creates an override for inline-level descendants. Play it »
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. Play it »
inherit Inherits the property from its parent element.

Browser support

chrome edge firefox safari opera
2.0+ 12.0+ 1.0+ 1.3+ 9.2+

Practice Your Knowledge

The unicode-bidi

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?