Skip to content
Related Articles

Related Articles

HTML | DOM Style unicodeBidi Property

View Discussion
Improve Article
Save Article
  • Difficulty Level : Basic
  • Last Updated : 05 Aug, 2022

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 to use Style unicodeBidi Property -->
    <script>
        function setUnicodeBidi() {
            elem = document.querySelector('.content');
            elem.style.unicodeBidi = 'embed';
        }
    </script>
</body>
</html>

Output:

Before clicking the button:

 embed-before

After clicking the button:

 embed-after

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 to use Style unicodeBidi Property -->
    <script>
        function setUnicodeBidi() {
            elem = document.querySelector('.content');
            elem.style.unicodeBidi = 'bidi-override';
        }
    </script>
</body>
</html>

Output:

Before clicking the button:

 override-before

After clicking the button:

 override-after

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 to use Style unicodeBidi Property -->
    <script>
        function setUnicodeBidi() {
            elem = document.querySelector('.content');
            elem.style.unicodeBidi = 'normal';
        }
    </script>
</body>
</html>

Before clicking the button:

 normal-before

After clicking the button:

 normal-after

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 to use Style unicodeBidi Property -->
    <script>
        function setUnicodeBidi() {
            elem = document.querySelector('.content');
            elem.style.unicodeBidi = 'initial';
        }
    </script>
</body>
</html>

Output:

Before clicking the button:

 initial-before

After clicking the button:

 initial-after

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 to use Style unicodeBidi Property -->
    <script>
        function setUnicodeBidi() {
            elem = document.querySelector('.content');
            elem.style.unicodeBidi = 'inherit';
        }
    </script>
</body>
</html>

Output:

Before clicking the button:

 inherit-before

After clicking the button:

 inherit-after

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!