Make layout with bidirectional text has never been so easy 🙌

Intro

Sometimes we have to support multi language app. Some of them might have a different direction, form left to right. But how to keep our margins/padding the same? I know there are some tools for that, but actually there is a native solution.

Today we are going to talk about logical css properties:

margin-block-start
margin-block-end
margin-inline-start
margin-inline-end

padding-block-start
padding-block-end
padding-inline-start
padding-inline-end

inset-block-start
inset-block-end
inset-inline-start
inset-inline-end

border-block-start
border-block-end
border-inline-start
border-inline-end

These properties are similar to usual properties but with special sense.

Example 1

Let's say we have a container with padding: 20px 60px 80px 10px; (top right bottom left). Then we add direction: rtl; to change language direction. We will see that our right padding is 60px but we need 10px as before left padding was.

That's why we need logical properties.

padding-inline: 10px 60px;
padding-block: 20px 80px;

If we use logical properties out paddings will be changed with text direction as well. In this case right padding 60px will become 10px and vice versa. It works the same for writing-mode: vertical-rl;

You can play with margins on the codepen at the end of article.

Example 2

I guess it's clear for margins and paddings. But these properties work for borders as well.

Let's see the difference for left to right direction.

  border-inline-start: 10px solid #FFD54F; // left
  border-inline-end: 10px solid #4DD0E1; // right

Example 3

Only one type of property has left. As you might already guess inset-block/inset-inline allow us to apply logical properties for elements with absolute positioning.

When we have element with position: absolute; and use usual properties we won't see any changes. But if we use inset-block/inset-inline and change text direction we will se how position of element will be changed as well.

Try it yourself 😉

Bonus

Now, you know how to show element by center using one row of css.

  margin-inline: auto;