How to set whether the text should be overridden to support multiple languages in the same document with JavaScript?

Javascript Web Development Front End Technology

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.