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">
GeeksforGeeks
</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">
GeeksforGeeks is a computer science portal.
</p>
<button onclick="setUnicodeBidi()">
Change unicodeBidi
</button>
<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">
GeeksforGeeks
</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">
GeeksforGeeks is a computer science portal.
</p>
<button onclick="setUnicodeBidi()">
Change unicodeBidi
</button>
<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">
GeeksforGeeks
</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">
GeeksforGeeks is a computer science portal.
</p>
<button onclick="setUnicodeBidi()">
Change unicodeBidi
</button>
<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">
GeeksforGeeks
</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">
GeeksforGeeks is a computer science portal.
</p>
<button onclick="setUnicodeBidi()">
Change unicodeBidi
</button>
<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">
GeeksforGeeks
</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">
GeeksforGeeks is a computer
science portal.
</p>
</div>
<button onclick="setUnicodeBidi()">
Change unicodeBidi
</button>
<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
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!