DEV Community

Cover image for Make layout with bidirectional text has never been so easy 🙌
Dzmitry Hutaryan
Dzmitry Hutaryan

Posted on

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
Enter fullscreen mode Exit fullscreen mode
padding-block-start
padding-block-end
padding-inline-start
padding-inline-end
Enter fullscreen mode Exit fullscreen mode
inset-block-start
inset-block-end
inset-inline-start
inset-inline-end
Enter fullscreen mode Exit fullscreen mode
border-block-start
border-block-end
border-inline-start
border-inline-end
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;

Image description

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
Enter fullscreen mode Exit fullscreen mode

Image description

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;
Enter fullscreen mode Exit fullscreen mode

Top comments (0)