I18n Guy, your I18n advisor

Right-To-Left Text in Markup Languages

Bidirectional Text

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.


RTL in HTML, XHTML, CSS2, CSS3

HTML, XHTML

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).

Examples Using The DIR Attribute

<HTML DIR="RTL">
<p DIR="LTR">

Demonstration of DIR Attribute On Bidirectional Text

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.

Thanks to Najib Tounsi for the Arabic example.

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.

<BDO DIR="LTR">ABC١٢٣X</BDO>

CSS2

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).

.my-rtl {direction:RTL; unicode-bidi:embed;} ... <span class="my-rtl"> force neutrals right-to-left <-| </span>

CSS3 Text Module

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.

/* class="vertical" establishes vertical writing top-to-bottom, columns proceeding right-to-left*/ .vertical {writing-mode: tb-rl;}

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".


Tips For Representing Right-To-Left Text In Markup Languages

See Unicode in XML and other Markup Languages (UTR 20).

Naming Conventions

The W3C Internationalization Group is now recommending to specification writers that terms such as "property-left" and "property-right" be avoided in favor of terms such as "property-before" and "property-after". When the writing direction changes, for example from left-to-right to either top-to-bottom or right-to-left, "before" and "after" are still correct and do not need to be modified. (This is true for most W3C specifications purposes. Your functionality may vary.)

Links