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:

1.

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>

2.

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)

3.

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.

4.

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.





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net