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>
.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>
.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>
.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>
.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>
.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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
06 Jun, 2023
Like Article
Save Article