Posted By
Bajarangi soft ,
Posted On 30-09-2020
The unicodeBidi property is used with the direction property to set or return whether the text should be overridden to support multiple languages in the same document.
Syntax and Usage
Return the unicodeBidi property: object.style.unicodeBidi Set the unicodeBidi property: object.style.unicodeBidi = "normal|embed|bidi-override|initial|inherit"
Property Values
| Value | Description |
|---|---|
| normal | Does not use an additional level of embedding. This is default |
| embed | Creates an additional level of embedding |
| bidi-override | Creates an additional level of embedding. Reordering depends on the direction property |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Return Value: A String, representing the level of embedding with respect to the bidirectional algorithm.
Example(1)
<button class="btn btn-info" onclick="max_function()">Click it</button>
<h2 id="h2" style="direction:rtl">Welcome to Bajarangisoft To Learn More About JAVASCRIPT</h2>
<script>
function max_function() {
document.getElementById("h2").style.unicodeBidi = "bidi-override";
}
</script>
In above example when you click button it will override text in a <h2> element.
Example(2)
<h2>Welcome to Bajarangisoft To Learn More About JAVASCRIPT</h2>
<h2 id="h2" style="direction:rtl;unicode-bidi:bidi-override;">This is another paragraph.</h2>
<button type="button" onclick="overridden_text()">Return the unicodeBidi property</button>
<script>
function overridden_text() {
alert(document.getElementById("h2").style.unicodeBidi);
}
</script>
In above example when you click button it will override text in a <h2> element with alert message.
Complete Code For CSS Style UnicodeBidi Properties With JavaScript
<!DOCTYPE html>
<html>
<head>
<title>How To Use CSS Style UnicodeBidi Properties With JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
h1 {
color: red;
}
</style>
<body>
<div class="container">
<br>
<div class="text-center">
<h1>How To Use CSS Style UnicodeBidi Properties With JavaScript</h1>
</div>
<br>
<div class="well">
<button class="btn btn-info" onclick="max_function()">Click it</button>
<h2 id="h2" style="direction:rtl">Welcome to Bajarangisoft To Learn More About JAVASCRIPT</h2>
<script>
function max_function() {
document.getElementById("h2").style.unicodeBidi = "bidi-override";
}
</script>
</div>
</body>
</html>