direction

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 descendent elements. It is recommended you use the HTML attribute, as that will work even if CSS fails or doesn't affect the page for any reason.

There is also a specific HTML tag that can be used for changing the direction of text: <bdo> the bidirectional 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

Other Resources

Browser Support

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

Comments

  1. User Avatar
    Tyson Matanich
    Permalink to comment#

    I recently wrote a short article on using SASS to simplify creating CSS for RTL/LTR sites and posted the code on GitHub.

  2. User Avatar
    Ahmed Khattab
    Permalink to comment#

    Hello,

    I have developed an Arabic online tool to switch all horizontal directions in an input CSS code: LTR to RTL CSS online

    • User Avatar
      Harb

      I would love to take a look at that tool actually am facing a problem with a script that’s supports only one language by time and need to add Arabic as a 2nd language and need help with this

  3. User Avatar
    Layal
    Permalink to comment#

    Check “RTL This” for tutorials and tips on front-end web development for LTR/RTL sites.

  4. User Avatar
    aol blog list
    Permalink to comment#

    I’ve been surfing online more than three hours today, yet I never found any interesting article like yours.
    It’s pretty worth enough for me. In my view, if all web owners and bloggers made good content as you did,
    the internet will be much more useful than evera before.

    aol blog list

  5. User Avatar
    aqarGroup
    Permalink to comment#

    how to make it in blog.com ?

    thank you :)

  6. User Avatar
    Ronald
    Permalink to comment#

    Please tell me the CSS code to remove permenently Left-to-Right tool and Right-to-Left tool on my blogspot. That default blogger code is below:

    <

    div dir=”ltr” style=”text-align: left;” trbidi=”on”>
    It happens everytime when I do one new post
    Thank you so much

  7. User Avatar
    Honey Designs

    where am i suppose to place this code ?

    {
    direction:rtl;
    unicode-bidi:embed;
    }

  8. User Avatar
    Flimm

    There is a new HTML5 accepted value for dir, and that is auto, it is very useful for input elements where you can’t predict whether the user is going to enter right-to-left or left-to-right text. It automatically sets the direction based on the first character the user enters. Pretty cool. Try it in this CodePen.

    I found this article very useful too: http://www.w3.org/International/questions/qa-html-dir

  9. User Avatar
    alex
    Permalink to comment#

    this is my website. http://www.bazreza.com . its in Persian language. when you to the top bar menu under store. the product list drop down to right. if i want to change that to right drop down. how and where should i place the css code in the child theme. no to mention, I am not a developer, so pls be as generous as you can when you explain.
    cheers

  10. User Avatar
    kanaga
    Permalink to comment#

    is there a circular way to display the list data around a marker pin on a map, minimum of 12 list items i have it should be displayed on all the directions like a flower and also it should responsive too.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag