|
|
Right-To-Left Text in Markup Languages |
Middle eastern languages such as Hebrew and Arabic are written predominantly right-to-left. Numbers are written with the most significant digit left-most, just as in European or other left-to-right text. Languages written in left-to-right scripts are often mixed in, so the complete document is bidirectional in nature, a mix of both right-to-left (RTL) and left-to-right (LTR) writing. Text written in the Hebrew and Arabic languages is often referred to as bidirectional, or "bidi" for short.
Also see: User Interfaces for Right-to-Left Languages
and Hebrew Characters And Their Unicode Values
Other languages that are written right-to-left are listed in
FAQ: Script Direction and Languages.
The HTML DIR attribute specifies the base direction (LTR, RTL) of text, or sections of text. The base direction can influence the ordering of the display of runs of text of different directions, and the display of directionally neutral text (i.e., characters or sequences of characters that do not have inherent directionality, as defined in the Unicode Character Standard).
Here is a sentence,
set first in a paragraph with left-to-right direction by the HTML DIR attribute (<p DIR="LTR">)
and then repeated without change in a paragraph with right-to-left direction (<p DIR="RTL">).
Note the use of an opening parenthesis "(" and closing square bracket "]" is
intentional to demonstrate a point.
(This example requires a browser that supports bidirectional text rendering. Microsoft IE supports bidirectional text rendering. Display this page in different browsers to compare. Here is a graphic image of this example you can use for comparison or to see the expected results: Demonstration of DIR Attribute On Bidirectional Text)
This example shows how browsers that support bidirectional text behave with different DIR attribute settings.
| HTML Markup | Resulting Display |
|---|---|
|
<p dir="LTR">He said "שלם" (shalom] to me.</p> <p dir="RTL">He said "שלם" (shalom] to me.</p> |
He said "שלם" (shalom] to me. He said "שלם" (shalom] to me. |
|
<p dir="LTR">Najib said "السلام عليكم" (as-salaam alaykum] to me.</p> <p dir="RTL">Najib said "السلام عليكم" (as-salaam alaykum] to me.</p> |
Najib said "السلام عليكم" (as-salaam alaykum] to me. Najib said "السلام عليكم" (as-salaam alaykum] to me. |
The changes due to the DIR attribute in this example, are:
DIR also specifies the directionality of tables.
Example of TABLE direction using DIR="LTR"
| European Digits | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
|---|---|---|---|---|---|---|---|---|---|---|
| Arabic Digits | ٠ | ١ | ٢ | ٣ | ٤ | ٥ | ٦ | ٧ | ٨ | ٩ |
For example, if DIR="RTL" is added to the <TABLE> element in the table above displaying the European and Arabic digits, the table is changed to look like this:
Example of TABLE direction using DIR="RTL"
| European Digits | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
|---|---|---|---|---|---|---|---|---|---|---|
| Arabic Digits | ٠ | ١ | ٢ | ٣ | ٤ | ٥ | ٦ | ٧ | ٨ | ٩ |
Authors can turn off the bidirectional algorithm for selected fragments of text with the BDO Element. It is useful for special situations, such as representing part numbers, where the Unicode Bidirectional Algorithm may not apply.
CSS2 has a direction property analogous to the HTML DIR atribute. It also introduced a unicode-bidi property for additional control of the Unicode Bidirectional Algorithm (UAX9).
CSS3 has a direction property for specification of left-to-right and right-to-left "in-line flow". It also has a unicode-bidi property for control of the Unicode Bidirectional Algorithm (UAX9).
CSS3 has a property for specifying block-progression flow and orientation. The block-progression property can specify vertical flow of top-to-bottom or horizontal flow of left-to-right or right-to-left.
The writing-mode property is a short-hand way to specify both direction and block-progression.
CSS3 also provides a way to turn characters 90, 180, and 270 degrees: Glyph orientation within a text run.
CSS3 has a feature that influences rendering of Arabic text, the 'text-kashida-space property'. Although Kashida is an Arabic character, in this context "Kashida is a typographic effect used in Arabic writing systems that allows glyph elongation at some carefully chosen points".
| Unicode Character Name | Scalar Value | Function | Equivalent Markup |
|---|---|---|---|
| LRE | U+202A | Left-to-Right Embedding | DIR attribute e.g. DIR="LTR" |
| RLE | U+202B | Right-to-Left Embedding | DIR attribute e.g. DIR="RTL" |
| U+202C | Pop Directional Format | No Equivalent </BDO> ends override | |
| LRO | U+202D | Left-to-Right Override | BDO Element e.g. <BDO dir="LTR"> |
| RLO | U+202E | Right-to-Left Override | BDO Element e.g. <BDO dir="RTL"> |