Skip to content
Related Articles

Related Articles

HTML | DOM Style unicodeBidi Property
  • Difficulty Level : Basic
  • Last Updated : 02 Aug, 2019

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"

Property Values:

  • embed: This value is used to create an additional level of embedding.

    Example:




    <!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
  • 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:




    <!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
  • normal: This value does not create any additional level of embedding. It is the default value.

    Example:




    <!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>                    
      Output:

    • Before clicking the button:
      normal-before
    • After clicking the button:
      normal-after
  • initial: It is used to set this property to its default value.

    Example:




    <!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
  • inherit: It inherits the property from its parent element.

    Example:




    <!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
  • Internet Explorer
  • Firefox
  • Opera
  • Apple Safari
My Personal Notes arrow_drop_up
Recommended Articles
Page :