CSS - Unicode-bidi Property

CSS unicode-bidi property is used to control how bidirectional text is displayed in a document. Bidirectional text contains both left-to-right (LTR) and right-to-left (RTL) text.

The unicode-bidi property allows developers to override the default behavior of the browser and ensure that bidirectional text is displayed correctly.

Possible Values

  • normal − This is the default value, and it specifies that the text should be displayed according to the inherent direction of the text itself. In other words, it will use the direction of the characters in the text to determine how it should be displayed.

  • embed − This value is used to explicitly set the direction of the text within an element. When you set unicode-bidi to embed, you can also use the direction property to specify whether the text should be displayed left-to-right (ltr) or right-to-left (rtl).

  • bidi-override − This value creates an override for inline elements. In case of block elements, it overrides the browser's bi-directional text algorithm and flows the text inside any inline children strictly according to the direction property.

  • isolate − This value isolates the element from its siblings.

  • isolate-override − This value uses the isolation behavior of the isolate keyword to the surrounding content and the override behavior of the bidi-override keyword to the inner content.

  • plaintext − Prevents bidirectional text (BIDI) algorithms from affecting the text inside the element.

Applies to

All positioned elements, but some of the values have no effect on non-inline elements.

DOM Syntax

object.style.unicodeBidi = "normal|embed|bidi-override|isolate|isolate-override|plaintext";
CSS properties unicode-bidi and direction are the only properties that are not affected by the all shorthand property.
This property is only used by Document Type Definition (DTD) designers. It is generally not recommended for web designers or similar authors to override it.

CSS unicode-bidi - normal Value

The following example demonstrates using unicode-bidi: normal, the text in its default order from right-to-left direction (RTL) −

<html>
<head>
<style>
   .box {
      direction: rtl;
      unicode-bidi: normal;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS unicode-bidi - normal Value</h2>
   <p>The following text is displayed in its default order from right-to-left direction.</p>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.  
   </div>
</body>
</html>

CSS unicode-bidi - embed Value

The following example demonstrates using unicode-bidi: embed. This value embeds the direction of the text within its surrounding content, and when the direction is set to rtl, the text is displayed in a right-to-left (RTL) direction −

<html>
<head>
<style>
   .box {
      direction: rtl;
      unicode-bidi: embed;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS unicode-bidi - embed Value</h2>
   <p>The following text is displayed in its default order from right-to-left direction.</p>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.  
   </div>
</body>
</html>

CSS unicode-bidi - bidi-override Value

The following example demonstrates using unicode-bidi: bidi-override. This value displays the text in reverse order, with the right most character displayed in the first position.−

<html>
<head>
<style>
   .box {
      direction: rtl;
      unicode-bidi: bidi-override;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS unicode-bidi - bidi-override Value</h2>
   <p>The following text is displayed in reverse order of the characters in right-to-left direction.</p>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.  
   </div>
</body>
</html>

CSS unicode-bidi - isolate Value

The following example demonstrates using unicode-bidi: isolate. This value is used to isolate a bidirectional text from its surrounding text. −

<html>
<head>
<style>
   .box {
      direction: rtl;
      unicode-bidi: isolate;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS unicode-bidi - isolate Value</h2>
   <p>The following text is displayed in its default order from right to left.</p>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.  
   </div>
</body>
</html>

CSS unicode-bidi - isolate-override Value

The following example demonstrates using unicode-bidi: isolate-override. This value is used to isolate and override the bidirectional text from its surrounding text −

<html>
<head>
<style>
   .box {
      direction: rtl;
      unicode-bidi: isolate-override;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS unicode-bidi - isolate-override Value</h2>
   <p>The following text is displayed in reverse order of the characters in right-to-left direction.</p>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.  
   </div>
</body>
</html>

CSS unicode-bidi - plaintext Value

The following example demonstrates using unicode-bidi: plaintext. This value treats the text as plain text without applying any bidirectional text algorithms. −

<html>
<head>
<style>
   .box {
      direction: rtl;
      unicode-bidi: plaintext;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS unicode-bidi - plaintext Value</h2>
   <p>The following text is displayed in its default order from left-to-right direction.</p>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.  
   </div>
</body>
</html>

CSS unicode-bidi - Related Properties

Following is the list of CSS properties related to unicode-bidi:

property value
direction Sets the direction of text in a block-level element.
Advertisements