CSS direction

The 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: ltr|rtl
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

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>