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