Tips 2 minute read Oct 24, 2024

Tip of the week #013: Use logical properties

When you want to define something directional, like padding-left or margin-top, it can be take into consideration what languages your website should support.

If you want to push text from left to right you'd might use margin-left to do so, but that may only make sense to do on a website where its language reading direction is left-to-right.

If you do, however, want to support languages where you read from right-to-left (RTL) or top-to-bottom (TTB), you'd might want to use CSS logical properties, like

margin-inline
margin-block
padding-inline
padding-block
border-inline
border-block
inline-size
inset
inset-inline
inset-block
etc.

Here's some examples of languages with different reading directions (quoted from MDN).

Hebrew and Arabic are right-to-left languages with new lines again being added below the previous ones.
In some writing modes, the text lines are vertical, written from top to bottom. Chinese, Vietnamese, Korean, and Japanese are traditionally written vertically, from top to bottom, with each new vertical line added to the left of the previous one.
Traditional Mongolian is also a top-to-bottom language, but new lines are to the right of previous ones.

Let's look at an example.

 Language: css 
 blockquote {
  padding-bottom: .5rem;
  padding-top: .5rem;
  padding-left: 1rem;
  border-left: .25rem solid;
} 

Here we have a simple blockquote with some padding added to the top and bottom, with a border and more padding on the left side. If we were to change the language to arabic, for instance, the border on the left would still be on the left, but the text would align right and be read from right-to-left. We don't want that.

Here are some logical properties we can use for direction instead:

border-inline-start = border-left in LTR-languages / border-right in RTL-languages
padding-inline-start = padding-left in LTR-languages / padding-right in RTL-languages
padding-block-start = padding-top in LTR-languages / padding-left in TTB-languages
padding-block-end = padding-bottom in LTR-languages / padding-right in TTB-languages

Here's a demo of three languages (notice the dir and lang attributes, and also the writing-mode: vertical-rl):

See the Pen Untitled by Håvard Brynjulfsen (@havardob) on CodePen.

In conclusion

I like rule of thumbs. I've startet using only logical properties when I write CSS (although, do not inspect this website, I haven't used them here), even though I only create websites in English or Norwegian. It's a nice rule of thumb. However, not everything should be decided by the language reading direction. If you want a border on the left, no matter the language, you write border-left.