direction

The direction property is used to, among others things, control the direction of text flow.

In some languages text flows from right to left (e.g Arabic, Persian, Hebrew), while many other languages flow from left to right (e.g English, Spanish, French, etc.). In some cases, both, left to right (LTR) content and right to left (RTL) content may exist in the same document. When LTR text is mixed with RTL in the same paragraph, bi-directional text is created. For example, a line containing both Arabic and English is a bi-directional (or Bidi) line of text. There are many possible challenges when dealing with Bidi text.

Unicode specifies an algorithm that is used by user agents to determine the direction of text in a bi-directional content. The algorithm determines directional flow of content based on properties of the characters and content, as well as explicit controls for language “embeddings” and directional overrides.

The direction property is used to specify the direction of:

• The flow of embeddings and overrides. In this case, it is used in conjunction with the unicode-bidi property.
• The base direction of block-level elements, for example, text in a paragraph. For the direction property to have any effect on inline-level elements, the unicode-bidi property’s value must be embed or override.
• The direction of horizontal overflow inside an element.
• The position of an incomplete last line of text, when the text-align property has the value justify. The line can be positioned to the right or to the left, depending on the value of direction.
• The direction of table column layout. Unlike the dir attribute, the direction property, when specified for table column elements, is not inherited by cells in the column since columns are not the ancestors of the cells in the document tree.

The direction of text inside a document can be changed using the dir attribute. All HTML elements may include a dir attribute. The dir attribute can be set either to “ltr” (which is the default) or “rtl”. All descendant nodes of the element on which dir is set will inherit the setting. The direction property is the CSS way of specifying the direction of text inside a document. It also takes the same values as the dir attribute. So, direction: rtl; has the same effect as dir= "rtl" on an element.

With that said, bidi best practices indicate that you should not specify the direction of text using CSS, but use markup to set the directionality of a document or chunk of information. As Nicolas Zakas says, the reason is that the direction of the text is an important part of the content of the document, and should remain even if there are no styles applied to the overall page. CSS is used to describe the presentation of the document, but the underlying content should still be valid even when consumed without presentational information (such as in an RSS reader).

Trivia & Notes

When you apply a right-to-left directionality to text that is left-to-right by default, such as English, the characters and words are rendered as they would in English, but any punctuation marks are rendered on opposite sides, as they would in a right-to-left-language. For example, the following:

<div class="element">
    Hello there!
</div>
                

.element {
    direction: rtl;
}
                

will be rendered as the following:

This is how you would read English text inside a right-to-left document or inside an element with a right-to-left directionality. You would read from the right to the left, and then at the end of the sentence (which is at the left) you’d find the punctuation marks.

Similarly, if you set a ltr direction on Arabic text it would be rendered on the left side with punctuation on the right:

If the direction of the Arabic text is set to rtl, which is its correct directionality, the text would be rendered as so:

The direction and unicode-bidi properties are the two only properties which are not affected by the all shorthand property.

Just like the direction property has a markup equivalent, the dir attribute, that can be used to specify the directionality of text, the unicode-bidi property’s functionality can be achieved using the HTML <bdo> element.

So, if you need to change the direction of text of an inline-level element, you can either use the direction property in conjunction with the unicode-bidi property and do that via CSS, or you can use the <bdo> element with the dir attribute. For example:

<p>
    This is a paragraph of text with left-to-right directionality. <span class="right">This is a piece with RTL directionality</span> inside the LTR piece of text.
</p>
                

.right {
    direction: rtl;
    /* need this in order to apply the direction to the inline-level span */
    unicode-bidi: embed; /* or bidi-override */
}
                

The directionality of the RTL piece of text inside the LTR paragraph can also be specified like this:

<p>
    This is a paragraph of text with left-to-right directionality. <bdo dir="rtl">This is a piece with RTL directionality</bdo> inside the LTR piece of text.
</p>
                

Of course, as mentioned earlier, using markup to specify directionality of text is the recommended best practice.