CSS unicode-bidi

The CSS unicode-bidi property is used to set whether the text should be overridden or not. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{direction: rtl; unicode-bidi: bidi-override;}
   </style>
</head>
<body>
   
   <h2>The unicode-bidi Property</h2>
   <p>This is an example of unicode-bidi property in CSS.</p>
   
</body>
</html>

Output

The unicode-bidi Property

This is an example of unicode-bidi property in CSS.

Note - The bidi in unicode-bidi stands for bidirectional.

Note - The direction property must be defined to apply the unicode-bidi.

CSS unicode-bidi Syntax

The syntax of unicode-bidi property in CSS, is:

unicode-bidi: x;

The value of x should be any of the following:

normal - used not to apply any additional level of embedding. This is the default value
bidi-override - used to create an override for the inline elements. It basically reverse the text
isolate-override - used to apply the isolation to surrounding content and the override behavior of bidi-override to the inner content
isolate - used to isolate the element from its siblings
embed - used to apply an additional level of embedding for inline elements. The direction of text will be, as defined by the direction
plaintext - used to calculate the direction without considering the parent element's bidirectional state
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS unicode-bidi Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{border: 2px solid red; margin-bottom: 16px;}
      .a{direction: rtl;}
      .b{direction: rtl; unicode-bidi: normal;}
      .c{direction: rtl; unicode-bidi: bidi-override;}
      .d{direction: rtl; unicode-bidi: isolate-override;}
      .e{direction: rtl; unicode-bidi: isolate;}
      .f{direction: rtl; unicode-bidi: embed;}
      .g{direction: rtl; unicode-bidi: plaintext;}
   </style>
</head>
<body>
   
   <div>
      <h2>Without unicode-bidi</h2>
      <p class="a">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
   </div>

   <div>
      <h2>unicode-bidi: normal</h2>
      <p class="b">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
   </div>

   <div>
      <h2>unicode-bidi: bidi-override</h2>
      <p class="c">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
   </div>

   <div>
      <h2>unicode-bidi: isolate-override</h2>
      <p class="d">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
   </div>

   <div>
      <h2>unicode-bidi: isolate</h2>
      <p class="e">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
   </div>

   <div>
      <h2>unicode-bidi: embed</h2>
      <p class="f">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
   </div>

   <div>
      <h2>unicode-bidi: plaintext</h2>
      <p class="g">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
   </div>

</body>
</html>

Output