Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set whether the text should be overridden to support multiple languages in the same document with JavaScript?
In this tutorial, we will learn how to set whether the text should be overridden to support multiple languages in the same document with JavaScript.
Use the unicodeBidi property in JavaScript to set whether the text should be overridden to support multiple languages in the same document. Set it to normal, embed, or bidi-override. The bidi-override allows you to add the direction, i.e., rtl to ltr.
Understanding Unicode Bidirectional Text
The unicodeBidi property controls the bidirectional text algorithm for elements containing text in multiple languages, especially when mixing left-to-right (LTR) and right-to-left (RTL) scripts like Arabic or Hebrew with English.
Using the unicodeBidi Property
In JavaScript, the unicodeBidi property is used along with the direction property to set whether the text should be overridden to support multiple languages in the same document. This property is a part of the style property in the element object. We require the document.getElementById() method to retrieve the element object.
Syntax
document.getElementById('element_id').style.unicodeBidi = "normal" | "embed" | "bidi-override" | "inherit" | "initial";
Parameters
normal ? It specifies no additional level of embedding. It is the default value.
embed ? It specifies an additional level of embedding.
bidi-override ? It specifies an additional level of embedding based on the direction property.
inherit ? The property is inherited by its parent element.
initial ? The property is set to default.
Example
In the below example, we set whether the text should be overridden to support multiple languages in the same document with JavaScript. The function "setUnicodeBidi()" is associated with a click event of the button "Set unicodeBidi". Whenever a user clicks on the button, the function executes and sets the unicodeBidi property of multiple elements.
<html>
<head>
<style>
.item {
padding: 15px;
margin-top: 5px;
background-color: cornsilk;
border: 1px solid black;
direction: rtl;
}
</style>
</head>
<body>
<h3> Set whether the text should be overridden to support multiple languages in the same document with JavaScript using the <i> unicodeBidi </i> property</h3>
<button onclick="setUnicodeBidi()"> Set unicodeBidi </button>
<div id="element1" class="item">
I Love Tutorialspoint
</div>
<div id="element2" class="item">
Welcome to Tutorialspoint
</div>
<script>
// All elements
const element1 = document.getElementById("element1");
const element2 = document.getElementById("element2");
// "Set unicodeBidi" button click event handler function
function setUnicodeBidi() {
element1.style.unicodeBidi = 'bidi-override';
element1.innerHTML = 'Welcome to Tutorialspoint (unicodeBidi: bidi-override)';
element2.style.unicodeBidi = 'embed';
element2.innerHTML = 'I Love Tutorialspoint (unicodeBidi: embed)';
}
</script>
</body>
</html>
Using the setProperty() Method
In JavaScript, the setProperty method takes the property name and value in the arguments and sets that property with the value provided. For example, to set whether the text should be overridden to support multiple languages in the same document, the setProperty method takes 'unicode-bidi' as the first argument. The second argument, it takes the value. This method is available in the style property of the element object of an element.
Syntax
document.getElementById('element_id').style.setProperty(name, value, priority);
Parameters
name ? The name of the property.
value ? The property value.
priority ? The priority of the property value (optional).
Example
In the below example, we have set whether the text should be overridden to support multiple languages in the same document with JavaScript using the setProperty method. There are two dropdown input fields for taking user inputs for the direction property and the unicodeBidi property. A button "Set unicodeBidi" is used that executes the "setUnicodeBidi()" function on the click event.
<html>
<body>
<h3> Set whether the text should be overridden to support multiple languages in the same document with JavaScript using the <i> setProperty() </i> method </h3>
<div>
<label for="unicodeBidi"> Select the unicodeBidi property: </label>
<select name="unicodeBidi" id="unicodeBidi">
<option value="normal"> normal </option>
<option value="embed"> embed </option>
<option value="bidi-override"> bidi-override </option>
</select>
</div>
<div style="margin: 5px 0px;">
<label for="direction"> Select the direction property: </label>
<select name="direction" id="direction">
<option value="ltr"> ltr </option>
<option value="rtl"> rtl </option>
</select>
</div>
<button onclick="setUnicodeBidi()"> Set unicodeBidi </button>
<div id="root" style="padding: 15px; margin-top: 5px; background-color: cornsilk; border: 1px solid black;">
Welcome to Tutorialspoint
</div>
<script>
// "Set unicodeBidi" button click event handler function
function setUnicodeBidi() {
const root = document.getElementById('root');
//direction input field value
const direction = document.getElementById('direction').value;
root.style.direction = direction;
//unicodeBidi input field value
const unicodeBidi = document.getElementById('unicodeBidi').value;
// using the setProperty method
root.style.setProperty('unicode-bidi', unicodeBidi);
}
</script>
</body>
</html>
Comparison of Methods
| Method | Syntax | Use Case |
|---|---|---|
| Direct Property | element.style.unicodeBidi |
Simple, direct assignment |
| setProperty() | element.style.setProperty('unicode-bidi', value) |
Dynamic property names, priority setting |
Conclusion
The unicodeBidi property is essential for handling multilingual text with different reading directions. Use it with the direction property to properly display mixed LTR and RTL content in web applications.
367 Views
