How unicode-bidi property is used in CSS ?
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
Last Updated :
23 Apr, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...