HTML | DOM Style unicodeBidi Property
The Style unicodeBidi property in HTML DOM is used with direction property to determine how multi-directional text is displayed. It overrides the default Unicode algorithm and gives the developer access to control text embedding.
Syntax:
- It returns the unicodeBidi property.
object.style.unicodeBidi
- It is used to set the unicodeBidi property.
object.style.unicodeBidi = "embed|bidi-override|normal|initial| inherit"
Return Values: It returns a string value, which represents the level of embedding with respect to the bidirectional algorithm.
Property Values:
1. embed: This value is used to create an additional level of embedding.
Example:
HTML
<!DOCTYPE html> < html > < head > < title > DOM Style unicodeBidi Property </ title > < style > .content { direction: rtl; unicode-bidi: bidi-override; } </ style > </ head > < body > < h1 style="color: green"> w3wiki </ h1 > < b >DOM Style unicodeBidi Property</ b > < p > The unicodeBidi property is used to decide how bidirectional text should be handled in a document. </ p > < p class="content"> w3wiki is a computer science portal. </ p > < button onclick="setUnicodeBidi()"> Change unicodeBidi </ button > <!-- Script to use Style unicodeBidi Property --> < script > function setUnicodeBidi() { elem = document.querySelector('.content'); elem.style.unicodeBidi = 'embed'; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
2. bidi-override: This value is used to create an additional level of embedding. It also reorders the text based on the direction specified on the direction property.
Example:
HTML
<!DOCTYPE html> < html > < head > < title > DOM Style unicodeBidi Property </ title > < style > .content { direction: rtl; } </ style > </ head > < body > < h1 style="color: green"> w3wiki </ h1 > < b >DOM Style unicodeBidi Property</ b > < p > The unicodeBidi property is used to decide how bidirectional text should be handled in a document. </ p > < p class="content"> w3wiki is a computer science portal. </ p > < button onclick="setUnicodeBidi()"> Change unicodeBidi </ button > <!-- Script to use Style unicodeBidi Property --> < script > function setUnicodeBidi() { elem = document.querySelector('.content'); elem.style.unicodeBidi = 'bidi-override'; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
3. normal: This value does not create any additional level of embedding. It is the default value.
Example:
HTML
<!DOCTYPE html> < html > < head > < title > DOM Style unicodeBidi Property </ title > < style > .content { direction: rtl; unicode-bidi: bidi-override; } </ style > </ head > < body > < h1 style="color: green"> w3wiki </ h1 > < b >DOM Style unicodeBidi Property</ b > < p > The unicodeBidi property is used to decide how bidirectional text should be handled in a document. </ p > < p class="content"> w3wiki is a computer science portal. </ p > < button onclick="setUnicodeBidi()"> Change unicodeBidi </ button > <!-- Script to use Style unicodeBidi Property --> < script > function setUnicodeBidi() { elem = document.querySelector('.content'); elem.style.unicodeBidi = 'normal'; } </ script > </ body > </ html > |
Before clicking the button:
After clicking the button:
4. initial: It is used to set this property to its default value.
Example:
HTML
<!DOCTYPE html> < html > < head > < title > DOM Style unicodeBidi Property </ title > < style > .content { direction: rtl; unicode-bidi: bidi-override; } </ style > </ head > < body > < h1 style="color: green"> w3wiki </ h1 > < b >DOM Style unicodeBidi Property</ b > < p > The unicodeBidi property is used to decide how bidirectional text should be handled in a document. </ p > < p class="content"> w3wiki is a computer science portal. </ p > < button onclick="setUnicodeBidi()"> Change unicodeBidi </ button > <!-- Script to use Style unicodeBidi Property --> < script > function setUnicodeBidi() { elem = document.querySelector('.content'); elem.style.unicodeBidi = 'initial'; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
5. inherit: It inherits the property from its parent element.
Example:
HTML
<!DOCTYPE html> < html > < head > < title > DOM Style unicodeBidi Property </ title > < style > #parent { unicode-bidi: bidi-override; } .content { direction: rtl; } </ style > </ head > < body > < h1 style="color: green"> w3wiki </ h1 > < b >DOM Style unicodeBidi Property</ b > < p > The unicodeBidi property is used to decide how bidirectional text should be handled in a document. </ p > < div id="parent"> < p class="content"> w3wiki is a computer science portal. </ p > </ div > < button onclick="setUnicodeBidi()"> Change unicodeBidi </ button > <!-- Script to use Style unicodeBidi Property --> < script > function setUnicodeBidi() { elem = document.querySelector('.content'); elem.style.unicodeBidi = 'inherit'; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by DOM Style unicodeBidi property are listed below:
- Google Chrome 2
- Edge 12
- Internet Explorer 5.5
- Firefox 1
- Opera 9.2
- Apple Safari 1.3
Contact Us