Skip to content
Related Articles

Related Articles

Improve Article

How unicode-bidi property is used in CSS ?

  • Difficulty Level : Basic
  • Last Updated : 23 Apr, 2021

Unicode-bidi property is used in CSS using the unicode-bidi property which is applied in HTML along with the direction property to determine how the bidirectional text is handled in a document.

Note: The direction CSS property sets the direction of text ( rtl for languages written from right to left and ltr for those written from left to right).

Syntax:

unicode-bidi: embed|bidi-override;

Property Value:

  • normal: It is the default value.
  • embed: This value is used to open an additional level of embedding
  • bidi-override: This value creates an override for inline element and in case of block element, it creates an override for inline-level descendants not within another block element.

Example 1: Using bidi-override property value which  overrides the browser’s bi-directional text algorithm,



Note: Unicode Bidirectional Algorithms is part of the Unicode text standard that describes how the user should order characters while rendering Unicode text.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1 {
            color: green;
        }
          
        .gfg {
            direction: rtl;
            unicode-bidi: bidi-override;
        }
    </style>
</head>
  
<body>
    <h1>Welcome to GeeksforGeeks</h1>
  
    <div>A Computer Science portal for geeks.</div>
    <div class="gfg">Data Structure and Algorithm.</div>
</body>
  
</html>

Output:

Example 2: Using embed property value which allows bi-directional text in an element.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        h1 {
            color: green;
        }
          
        .gfg {
            direction: rtl;
            unicode-bidi: emb;
        }
    </style>
</head>
  
<body>
    <h1>Welcome to GeeksforGeeks</h1>
  
    <div>A Computer Science portal for geeks.</div>
    <div class="gfg">Data Structure and Algorithm.</div>
</body>
  
</html>

Output:

Supported Browsers: The browsers supported by direction property are listed below:

  • Google Chrome 2.0
  • Internet Explorer 5.5
  • Firefox 1.0
  • Opera 9.2
  • Apple Safari 1.3



My Personal Notes arrow_drop_up
Recommended Articles
Page :