Thedir attribute in HTML and thedir property in CSS can be used to set the direction of text and horizontal flow. Some languages are written Left-To-Right (LTR), while others are written Right-To-Left (RTL). So having this level of control is vital for creating documents and interfaces for the web.

Building an interface to support both LTR and RTL layouts is a challenge. Flexbox and Grid certainly makes things easier, but they don't cover all our styling needs.

There are many CSS rules we write in which we specify a physical direction or side. For instance, when we write CSS to layout horizontal elements, it is common to set a margin only on a single side and set a margin of0 (on the same side) to the first or last sibling element.

.element{margin-right:1rem;}.element:last-child{margin-right:0;}

Or

.element:not(:last-child){margin-right:1rem;}

In the above example we are adding a margin on the right side of each element except the last. That's how it is written. Though what we mean when we write this is to add a marginafter the element in the direction of the horizontal flow of the document (or the parent element).

A common way to styleblockquote is to add a border to one side of the quote; the side we consider to comebefore the quote.

This isBulma's<blockquote> styling:

.contentblockquote{background-color:#f5f5f5;border-left:5pxsolid#dbdbdb;padding:1.25em1.5em;}

And there are many other styling choices we make in which we specify a side/direction (left/right) in CSS, but what we actually mean is before/after.

So when building interfaces that support both LTR and RTL layouts, one option would be to write CSS rules like:

.class{}html[dir="rtl"].class{}

Or perhaps even load different stylesheets for LTR and RTL layouts. However, both options require we either write more CSS orset up our tooling to generate the appropriate flipped styles. And there are alsotools that convert LTR to RTL styles for you.

Wouldn't it be nice to work with a lower level of abstraction instead? What if we can tell the browser we are targeting the side before/after an element instead of referring to the physical directions left/right? At the end of the day this is what we mean a lot of the times. This reminds me of this tweet:

keith•j•grant

@keithjgrant

When you code CSS, you’re writing abstract rules to take *unknown* content and organize it in an *unknown* medium. That shit is hard.

13:26 PM - 17 Mar 2017

CSS has what is calledlogical properties. We can now tell the browser what we actually mean. Instead of using-left and-right, we can use-inline-start and-inline-end:

.element:not(:last-child){margin-inline-end:1rem;}

Similarly instead of using-top and-bottom, we can use-block-start and-block-end.

This means we can write one set of rules that target both LTR and RTL layouts. Here is an example using themargin-inline-end property:

Using theborder-inline-start andpadding-inline-start properties:

Firefox also supportsborder-*-*-radius so you can target different corners withborder-start-start-radius,border-end-start-radius, etc.

All demos:

For a deeper explanation, you can refer to Rachel Andrew's articleUnderstanding Logical Properties And Values. This is not just about RTL interfaces or horizontal bidirectional CSS rules. Rachel's article also covers logical dimensions.

Browser Support

Can I Use?:

• Logical Properties
• border-*-*-radius