Setting Text Direction

Increasingly, the Web is being used to display text in non-Western languages. The direction of the text (left-to-right or right-to-left) can vary from language to language, so it may be necessary to override the browser's default display direction if you aren't using English (Tables 4.12 and 4.13).

Table 4.12. Direction Values
VALUE	COMPATIBILITY
rtl	IE5^[*], FF1, S1, CSS2
ltr	IE5^[*], FF1, S1, CSS2

^[*] Windows version only. Not available in Mac.

Table 4.13. Unicode-Bidi Values
VALUE	COMPATIBILITY
bidi-override	IE5^[*], FF1, CSS2
embed	IE5^[*], FF1, CSS2
normal	IE5^[*], FF1, CSS2

^[*] Windows version only. Not available in Mac.

In this example (Figure 4.13), the first block of text is set left-to-right, while the second paragraph runs right-to-left.

Figure 4.13. Although still using English characters, the second paragraph of text has had its direction reversed.

To set the direction text is displayed:

direction:

Type the direction property name, followed by a colon (:), in the CSS definition list (Code 4.11).

Code 4.11. The class `rightToLeft` is created to force the text to display from right to left even if the browser uses left to right.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS, DHTML &amp; Ajax | Setting Text Direction</title> <style type="text/css" media="screen"> <!-- body {      font-size: 1.2em;      font-family: Georgia, "Times New Roman", times, serif; } .leftToRight {      direction: ltr;      unicode-bidi: normal; } .rightToLeft {      direction: rtl;      unicode-bidi: bidi-override; } --> </style> </head> <body> <h2 >Left to Right</h2> <p >Hardly knowing what she did, she picked up a little bit of stick,  and held it out to the puppy...</p> <h2 >Right to Left</h2> <p >Hardly knowing what she did, she picked up a little bit of stick,  and held it out to the puppy...</p> </body></html>

rtl;

Type a value for the direction, followed by a semicolon. Choose one of the following:

rtl, which displays text right-to-left
ltr, which displays text left-to-right (for Western languages)

unicode-bidi:

Type the unicode-bidi property name, followed by a colon (:), in the CSS definition list.

This property is used to define how the direction property is applied if there are multiple text directions being used in a single Web page.

bidi-override;

Type a value for the embedded bidirectional code. Choose one of the following:

bidi-override, to override the currently set direction for text in the browser. This is needed to truly reverse the text.
embed, to embed the bidirectional text within the current direction. This effectively justifies the text to the left (ltr) or right (rtl), although ending punctuation is shifted.
normal, to use the browser's default for embedded bidirectional text.

Tips

Keep in mind that this technique is effective only if the viewer's computer can display the text in the intended language.
The unicode-bidi property is not inherited by child elements and must be applied to each one separately.

Table 4.12. Direction Values

Table 4.13. Unicode-Bidi Values

Figure 4.13. Although still using English characters, the second paragraph of text has had its direction reversed.

Code 4.11. The class rightToLeft is created to force the text to display from right to left even if the browser uses left to right.

Code 4.11. The class `rightToLeft` is created to force the text to display from right to left even if the browser uses left to right.