CSS Logical Properties: Forget About Left and Right

Ever wondered how your web designs would look to users who read from right-to-left or in vertical modes? If the thought never crossed your mind, you’re not alone. Until now, supporting different reading directions was often an afterthought, if considered at all, and required extra effort that many developers couldn’t invest.

But get ready for a game-changing revelation – CSS Logical properties! In this article we’ll introduce you to a modern approach that automatically handles reading direction support. Wwith logical properties, your designs will effortlessly adapt to diverse writing directions. Join me in diving into the power of CSS Logical properties and empower you to create web experiences that cater to all users, regardless of their preferred reading direction!

Time to unlearn what you know about left and right

We’ve been using top, right, bottom & left for as long as I can remember. Using margin-left feels like second nature. However, there is one significant problem with these properties: they are tied to the direction of the text. This means that when you’re using a right-to-left language like Arabic, you need to use margin-right instead of margin-left. And both of these margins should be applied conditionally, based on the reading direction. Both of these margins should be applied conditionally, based on the reading direction. This can be very confusing and error-prone, not to mention the extra time it takes to write styles for both left-to-right and right-to-left layouts.

Understanding Logical Properties

This is where logical properties come in! They are a relatively recent addition to CSS that brings much-needed flexibility to our styling approach. Unlike traditional CSS properties that rely on physical directions like top or left, logical properties allow us to style elements based on the flow direction of content.

What does “flow direction” mean? Let’s take a look at the following image that compares logical properties to physical properties in a left-to-right layout:

Notice that for the logical properties on the x-axis, both properties are prefixed with inline, and on the y-axis, both properties are prefixed with block. The start property refers to the start of this axis, and end refers to the end of this axis.

How this applies to margin, padding or border

For most of the properties, the rule is that block-start, block-end and inline-start, inline-end are suffixes to the property name. For example margin-block-start or padding-inline-end.

Take a look at the following figure to get a better idea of what that looks like:

Sounds complicated. Why are we doing this again?

Because not everyone reads from left to right. Writing directions go from left to right, right to left, top to bottom or even bottom to top. If you use left, what would that refer to? It’s impossible to tell. That’s why we need logical properties — they switch directions when the reading direction does.

Perhaps that still sounds confusing, but the good thing is you don’t need to think about it when using logical properties. If you build the website in left-to-right mode, using logical properties and keeping to above image in mind, the browser will do all the work for you. The added benefit is that suddenly your website works in all writing modes, with almost zero effort from your side!

Live example of logical properties

Take some time to change the settings in the demo at the top of this article. The first version is written by using physical properties like left and right, while the second one uses logical properties. Notice what happens in the first version if you change the direction.

Vertical writing mode

As someone who can only read left-to-right, this really feels like ninja-mode to me. Try to switch the mode in the example above.

The big benefit is though, that by using logical properties, you will already create a result that is at least quite okay. And probably better than 95% out there.

I can imagine to really get vertical writing mode 100% perfect, you still might need to do some additional tweaks. Simply because it’s so diferent from horizontal reading mode. But again, by using logical properties people who can read vertical writing mode will already have a much better experience.

Finally it’s also important to note that vertical writing mode is most of the time not writting in English. So if you’re not supporting a locale that’s using veritcal writing mode, it’s probably not something your user wants to see anyway.

List of physical properties vs logical properties

In the list below, you’ll find an overview of the most common physical properties and their logical counterparts:

TailwindCSS

Oh, so you use Tailwind! Well, I have partially good news for you. Since version 3.3 Tailwind officially supports most of the inline logical properties. Block support is still lacking though, mainly because the team is still unsure about what the classnames should look like. For example pb is right now used for padding-bottom, but pb could also mean padding-block.

Available properties

As of July 2023 you can use logical properties for the following properties: top, left, bottom, right, padding, margin, border width, border color, border radius, scroll padding & scroll-margin.

Missing properties

The main missing properties are width, height, min-width, min-height, max-width, max-height, overflow-x and overflow-y. Let’s hope they get added soon as well!

Should you use logical properties?

Yes! No matter if you use Tailwind or not, you should definitely start using logical properties. I know rewiring your brain is hard — but the change if or the better. It makes your website so much more inclusive. Once you get used to it,you can support other writing directions with pretty much zero effort. That’s a big win for both your users and the time you need to spend to otherwise write custom RTL styling.