CSS Logical Properties

What are logical properties?

These are a different way of writing top, left, bottom, right. It's useful if you're going to be dealing with any languages that go in a different direction.

So, for example, you have a bit of text on your page that you want to show on the right. Since text is aligned left by default, to align it right you can say:

p {
  text-align: right;
}

However, if you then need to display the page in a right-to-left language (eg Arabic or Hebrew) then it displays text right aligned by default. So that piece your moved to the right earlier, now needs to be on the left. So you'd need another bit of CSS to align it left:

p[dir="rtl"] {
  text-align: left;
}

Logical properties make this much easier. Using them, here's what will work for both text directions:

p {
  text-align: end;
}

Much shorter.

How can I use them?

Effectively, you're going to be using start and end, rather than top, left, bottom, right. Then for left and right you use inline and for top and bottom you use block. Confused? Here's an example to confuse you more.

div {
  margin-inline-start: 1em;
  margin-block-end: 1em;
  border-start-start-radius: 1em;
  border-start-end-radius: 1em;
}

If your text is left to right, then that div will have a margin of 1em at the left and bottom and have rounded corners at the top left and bottom right.

If your text is right to left, then that div will have a margin of 1em at the right and bottom and have rounded corners at the top right and bottom left.

Here's some more explanation.

Start and end

These are the easiest parts to understand since they're plain English. Start is where the text starts. So in English that would be top and left. In Arabic that would be top and right.

End is the opposite, so where the text ends.

Inline and block

Inline and block are words you're already familiar with if you've done any CSS. If you set something to be display: inline then it'll go next to each other. This is similar to what inline means in logical properties: it's the across part. So inline-start = left and inline-end = right.

Block is the other way round: if you set something to be display: block you expect it to go beneath each other. So block-start = top and block-end = bottom.

Border radii are more confusing since they don't mention inline or block. But the first start/end is the block (ie top/bottom) and the second is inline (ie left/right). But I had to look that up because I can't remember which way round it is. The good thing with CSS is you can try one, easily discover it's a different corner to the one you want, then try something else.

Vertical text

There are some languages that write text vertically rather than horizontally. I've never done anything on the web with those and just getting my head around LTR and RTL is enough, so this post isn't covering vertical text. It is the same principle, though, just that inline-start = top and block-start = left.

It's like with Flexbox when you make it columns and suddenly justify is vertical and align is horizontal and your head explodes.

Browser use

It doesn't work in all browsers yet. Although if you're reading this in the future, maybe it does (apart from IE...). You can easily check all the logical properties as a group in Can I Use.... Right now most things work in most browsers and they will work for more than 90% of users. The one that tripped me up on a project recently is that Safari on iOS can't cope with the individual border radius corners.

Reference

I find this article on CSS Tricks to be the best reference. It gives you tables of how to translate what you'd usually use for left to right languages into logical properties.