CSS unicodebidi Property (original) (raw)

CSS unicode-bidi Property

Last Updated : 6 Jun, 2023

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 `

CSS unicode-bidi Property 
<!-- style for unicode-bidi property -->
<style>
    .GFG {
        direction: rtl;
        unicode-bidi: normal;
    }
</style>

GeeksforGeeks

<h2>
    CSS unicode-bidi Property
</h2>

<div class = "GFG">
    A computer science portal for geeks
</div>

`

Output:

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

Syntax:

unicode-bidi:embed;

Example:

html `

CSS unicode-bidi Property 
<!-- style for unicode-bidi property -->
<style>
    .GFG {
        direction: rtl;
        unicode-bidi: embed;
    }
</style>

GeeksforGeeks

<h2>
    CSS unicode-bidi Property
</h2>

<div class = "GFG">
    A computer science portal for geeks
</div>

`

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 `

CSS unicode-bidi Property 
<!-- style for unicode-bidi property -->
<style>
    .GFG {
        direction: rtl;
        unicode-bidi: bidi-override;
    }
</style>

GeeksforGeeks

<h2>
    CSS unicode-bidi Property
</h2>

<div class = "GFG">
    A computer science portal for geeks
</div>

`

Output:

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

Syntax:

unicode-bidi: initial;

Example:

html `

CSS unicode-bidi Property 
<!-- style for unicode-bidi property -->
<style>
    .GFG {
        direction: rtl;
        unicode-bidi: initial;
    }
</style>

GeeksforGeeks

<h2>
    CSS unicode-bidi Property
</h2>

<div class = "GFG">
    A computer science portal for geeks
</div>

`

Output:

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

Syntax:

unicode-bidi: inherit;

Example:

html `

CSS unicode-bidi Property 
<!-- style for unicode-bidi property -->
<style>
    .Geeks {
        direction: rtl;
        unicode-bidi: bidi-override;
    }
    .GFG {
        unicode-bidi: inherit;
    }
</style>

GeeksforGeeks

<h2>
    CSS unicode-bidi Property
</h2>

<div class = "Geeks">
    <div class = "GFG">
        A computer science portal for geeks
    </div>
</div>

`

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: