Skip to content
Related Articles

Related Articles

CSS | unicode-bidi Property

View Discussion
Improve Article
Save Article
  • Last Updated : 04 Aug, 2022

The unicode-bidi property in HTML DOM is applied along-with the direction property to determine how the bidirectional text is handled in a document. 

Syntax: 

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

Property Values: 

1. normal: It is the default value. The additional level of embedding does not open from the element. 

Syntax: 

unicode-bidi: normal;

Example: 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        CSS unicode-bidi Property
    </title>
     
    <!-- style for unicode-bidi property -->
    <style>
        .GFG {
            direction: rtl;
            unicode-bidi: normal;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
    <h2>
        CSS unicode-bidi Property
    </h2>
     
    <div class = "GFG">
        A computer science portal for geeks
    </div>
</body>
 
</html>                   

Output:

 

2. embed: This value is used to open an additional level of embedding. 

Syntax: 

unicode-bidi:embed;

Example: 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        CSS unicode-bidi Property
    </title>
     
    <!-- style for unicode-bidi property -->
    <style>
        .GFG {
            direction: rtl;
            unicode-bidi: embed;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
    <h2>
        CSS unicode-bidi Property
    </h2>
     
    <div class = "GFG">
        A computer science portal for geeks
    </div>
</body>
 
</html>                   

Output:

 

3. 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. 

Syntax:

unicode-bidi:bidi-override;

Example: 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        CSS unicode-bidi Property
    </title>
     
    <!-- style for unicode-bidi property -->
    <style>
        .GFG {
            direction: rtl;
            unicode-bidi: bidi-override;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
    <h2>
        CSS unicode-bidi Property
    </h2>
     
    <div class = "GFG">
        A computer science portal for geeks
    </div>
</body>
 
</html>                   

Output:

 

4. initial: It sets the unicode-bidi property to its default value. 

Syntax: 

unicode-bidi: initial;

Example: 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        CSS unicode-bidi Property
    </title>
     
    <!-- style for unicode-bidi property -->
    <style>
        .GFG {
            direction: rtl;
            unicode-bidi: initial;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
    <h2>
        CSS unicode-bidi Property
    </h2>
     
    <div class = "GFG">
        A computer science portal for geeks
    </div>
</body>
 
</html>                   

Output:

 

5. inherit: The unicode-bidi property is inherited from its parent element. 

Syntax: 

unicode-bidi: inherit;

Example: 

html




<!DOCTYPE html>
<html>
     
<head>
    <title>
        CSS unicode-bidi Property
    </title>
     
    <!-- style for unicode-bidi property -->
    <style>
        .Geeks {
            direction: rtl;
            unicode-bidi: bidi-override;
        }
        .GFG {
            unicode-bidi: inherit;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
    <h2>
        CSS unicode-bidi Property
    </h2>
     
    <div class = "Geeks">
        <div class = "GFG">
            A computer science portal for geeks
        </div>
    </div>
</body>
 
</html>                   

Output:

 

6. isolate-override: It applies the isolation behavior of the isolate keyword to the surrounding content and the override behavior of the bidi-override to the inner content. 

Syntax: 

unicode-bidi: isolate-override;

7. plaintext: It makes the element directionality calculated without considering its parent bidirectional state or the value of the direction property. 

Syntax:

unicode-bidi: plaintext;

Supported Browsers: The browser supported by unicode-bidi property are listed below:

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!