CSS Logical Properties: Forget About Left and Right
Embrace the magic of CSS logical properties and effortlessly adapt to different writing directions with ease.
... Almost ready!
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
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
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
inline-end are suffixes to the property name. For example
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 below. The first version is written by using physical properties like
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:
|margin-top + margin-bottom||margin-block|
|margin-left + margin-right||margin-inline|
|padding-top + padding-bottom||padding-block|
|padding-left + padding-right||padding-inline|
|top + bottom||inset-block|
|left + right||inset-inline|
|top + bottom + left + right||inset|
Not so good browser support from here 👇
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
pb could also mean
The main missing properties are
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.