B.119. unicode-bidi

Most western languages are written left-to-right (LTR). As you probably know, many other languages (e.g. Hebrew) are written right-to-left (RTL). Documents written with the Unicode character set can contain text from both LTR and RTL languages. The Unicode standard includes a complicated algorithm that should be used for displaying such mixed text. It also defines special characters that let you "group" text.

For example, consider the following imaginary string of text, where the lowercase text represents LTR characters and the uppercase text represents RTL:

english1 HEBREW1 english2 HEBREW2 english3

Now, the obvious way to render this would be "english1 1WERBEH english2 2WERBEH english3", but what if we add some HTML tags to the mix?

<p>english1 <q>HEBREW1 english2 HEBREW2</q> english3</p>

As you can see, the text beginning with HEBREW1 and ending with HEBREW2 is intended as an inline quotation in Hebrew, which just happens to contain an English word. Since HEBREW1 and HEBREW2 belong to the same block of Hebrew text, "2WERBEH" should be rendered to the left or "1WERBEH". With this in mind, the complete paragraph should be rendered as "english1 2WERBEH english2 1WERBEH english3".

The HTML 4.0 standard (along with XHTML 1.0) defines the dir attribute and the bdo element to handle these complexities. To obtain the desired rendering in an HTML4-compatible browser, the code should be:

<p>english1 <q lang="he" dir="rtl">HEBREW1 english2 HEBREW2</q>
  english3</p>

The dir attribute of the q tag is what specifies the rendering order; the lang attribute won't have any actual visible effect. For full details on language and bidirectional text rendering in HTML, refer to Section 8 of the HTML 4.0 standard.

So, where does CSS come into play, you ask? Well, the direction property, in combination with a unicode-bidi property setting of embed, performs the same role as the HTML dir attribute. In combination with a unicode-bidi property setting of bidi-override, direction has the same effect as the HTML bdo tag. It is still considered best practice, however, to include bidirectional text attributes as part of the HTML code. The direction and unicode-bidi properties are intended for use in styling XML documents that do not have the benefit of HTML 4's bidirectional text features. Since the focus of this book is on Web development, I'll therefore refer you to the CSS2 standard for full details on these properties.

Inherited: No

See also: Section B.31direction

B.119.1. Value

This property will accept any one of these three constant values:

• normal: The element is treated normally for purposes of bidirectional text rendering; LTR text is rendered LTR and RTL text is rendered RTL. The direction property has no effect on the element.

• embed: The element behaves as an embedded sequence of LTR or RTL text, as set by the direction property. This is equivalent to setting the HTML dir property on the element.

• bidi-override: All text inside the element, whether LTR or RTL, is rendered in the direction set by the direction property. This is equivalent to using an HTML bdo tag with the equivalent dir attribute value.

Initial value: normal

B.119.2. Compatibility

CSS Version: 2

Not supported by any currently-available browser.

B.119.3. Example

This style rule sets the text direction of an imaginary XML element named hebrew to rtl. The unicode-bidi property setting in this case ensures that all text within the hebrew element (even text that would normally be displayed LTR according to the Unicode standard) will be displayed RTL.

hebrew {
  direction: rtl;
  unicode-bidi: bidi-override;
}