codeThe CSS direction property sets the writing direction of text, that is Left to Right (LTR) or Right to Left (RTL). It gives support to the Arabic and Hebrew scripts which are written from right to left.
direction: rtl; /* right to left */
direction also sets the default alignment of text (left in LTR, and right in RTL) and the direction of cell flow in a table row. It affects the start and end values of the CSS text-align property.
Browser Support: Full
direction: rtl vs dir="rtl"
The writing direction is determined automatically by a complex algorithm called Unicode bidirectional algorithm. However, the direction of cell flow in a table row is not affected. The algorithm may render the wrong direction when mixing LTR and RTL characters. That's when the direction has to be explicitly defined using direction: rtl or HTML:
<p dir="rtl" ></p>
The W3C recommendation is to use dir="rtl" instead of CSS.
How to Add RTL Styles
Adding dir="rtl" is not enough. For a proper display of an RTL version of a LTR site, margins, paddings and floats also have to be flipped. For HTML5 only, use <html dir="rtl" > and CSS like:
html[dir='rtl'] div {
float: right;
}
For full, support, add an ID to the HTML tag in RTL pages. See CSS: How to Host Right-to-Left Styling for more information.
Useful Resources
- CSS: How to Host Right-to-Left Styling, an article on how to properly implement RTL
- W3C article on language specific markup
- CSS 2.1 Specification, details the related [unicode_bidi] property.
- WordPress.org instructions on adding an RTL stylesheet (useful for non-WordPress sites too)