The CSS reference

"unicode-bidi" - css property (v. css 2)

  • The unicode-bidi property along with the 'direction' property allows us to write the character stream in an opposite direction.
  • In some languages, we may need the text to appear in a mixed orientation and the unicode-bidi property help us to achieve that.
  • Initial value: normal
  • The property is not inherited
  • HTML usage: all elements
  • Browsers that support the unicode-bidi - property :
    Internet Explorer Mozilla Firefox Opera Google Chrome Apple Safari

Possible unicode-bidi values:

values Comments CSS
normal The element does not open an additional level of embedding with respect to the bidirectional algorithm 2
embed If the element is inline-level, this value opens an additional level of embedding with respect to the bidirectional algorithm. 2
bidi-override For inline-level elements this creates an override. For block-level, table-cell, table-caption, or inline-block elements this creates an override for inline-level descendants not within another block-level, table-cell, table-caption, or inline-block element. This means that inside the element, reordering is strictly in sequence according to the 'direction' property; the implicit part of the bidirectional algorithm is ignored. 2
inherit Will inherit the value from parent specification. 2

Property "unicode-bidi" example:

<!DOCTYPE HTML >
<html  >
  <head>
    <title>Test</title>
    <style type="text/css">
      div {border: blue 1px solid; color:green;
           padding: 4px 4px 4px 4px; width: 400px;}
      .rtl1 {direction: rtl;}
      .rtl2 {direction: rtl;
             unicode-bidi: bidi-override;}
    </style>
  </head>
  <body>
    direction: rtl;<br>
    <div class='rtl1' >In addition, it specifies
      the direction of table column layout,
      the direction of horizontal overflow,
      and the position of an incomplete last
      line in a block in case of 'text-align' : justify.
    </div>
    <br>
    direction: rtl; with unicode-bidi: bidi-override;<br>
    <div class='rtl2'  >For the 'direction'
      property to affect reordering in inline-level
      elements, the 'unicode-bidi' property's value
      must be 'embed' or 'bidi-override' .
    </div>
    <br>
    The last text in left to right direction is:<br>
    <div >For the 'direction'
      property to affect reordering in inline-level
      elements, the 'unicode-bidi' property's value
      must be 'embed' or 'bidi-override'.
    </div>
  </body>
</html>

Javascript access:

// To SET values ([o] is the target object)
[o].style.unicodeBidi="unicode-bidi value"
// To GET values you must first get the computed style object
// To get that object in IE or Opera:
var cStyle=[o].currentStyle;
// To get that object in Firefox, Chrome or Safari (w3c-type):
var cStyle=window.getComputedStyle([o],null)
// To GET the property value:;
var value=cStyle.unicodeBidi;
© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.