Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
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
In the above syntax, we use the unicodeBidi property along with the document.getElementById() method.
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.style.innerHTML = 'Welcome to Tutorialspoint (unicodeBidi: bidi-override)' element2.style.unicodeBidi = 'embed' element2.style.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)
In the above syntax, we use the setProperty method on the element object returned by the document.getElementById() method.
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>
In this tutorial, we have learned how to set whether the text should be overridden to support multiple languages in the same document with JavaScript. We have seen two examples of setting the unicodeBidi property with a button click event and user input. In addition, we learned the unicodeBidi property and the setProperty method. Users can follow any of these as per their requirements.
219 Views
