direction

Last updated on

The direction property in CSS sets the direction of of content flow within a block-level element. This applies to text, inline, and inline-block elements. It also sets the default alignment of text and the direction that table cells flow within a table row.

.main-content {
  direction: rtl;  /* Right to Left */
}

The valid values are:

  • ltr – Left to Right, the default
  • rtl – Right to Left
  • inherit – inherits its value from the parent element

The text on this page is set in the default ltr direction. The most common use case to set rtl is for web pages with Hebrew or Arabic text. Here is an example of Arabic set in rtl:

طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد

There is an HTML attribute for setting the direction as well:

<body dir="rtl">

Both the CSS property and the HTML attribute will cascade the direction to decedent elements. It is recommended you use the HTML attribute, as that will work even if CSS fails or doesn’t effect the page for any reason.

There is also a specific HTML tag that can be used for changing the direction of text: <bdo> thebidirectional override element. This exists so there is a semantics-free element to use just for this purpose. For instance:

<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>

To pair all this with CSS…

*[dir="ltr"] { direction: ltr; unicode-bidi: embed; }

*[dir="rtl"] { direction: rtl; unicode-bidi: embed; }

bdo[dir="ltr"] { direction: ltr; unicode-bidi: bidi-override; }

bdo[dir="rtl"] { direction: rtl; unicode-bidi: bidi-override; }

“bidi” = “bi-directional”

When creating layouts in a pre-flexbox pre-grid world, people often chose between floats and inline-block to create columns. One advantage to inline-block, other than removing the need to clear the float, is that changing the direction property reverses the layout as well. This isn’t true for floats, which would need to be reset if a webpage supports multiple languages and the language direction changed from ltr to rtl or vice versa.

If you need to change the direction of an inline element (against what its parent block level element is), you’ll either need to use the element, or ensure the inline element sets the unicode-bidi property properly:

<p>Some regular text <bdo dir="rtl">reverse direction</bdo> text text <span dir="rtl">reverse direction</span></p>
span[dir] {
  unicode-bidi: bidi-override;
}

Related Properties

Browser Support

Chrome Safari Firefox Opera IE Android iOS
2.0+ 1.3+ Any 9.2+ 5.5+ Any 3.1+

Leave a Reply

Your email address will not be published. Required fields are marked *