(And Why You Should Stop Using “Left/Right” Like It’s 1999)
Hey fellow devs! Let’s talk about something that’s been a game-changer for me: CSS logical properties. If you’re tired of writing separate styles for left-to-right (LTR) and right-to-left (RTL) languages, or if you’ve ever cursed at a layout breaking in vertical writing modes, this is for you.
What’s the Big Deal?
You know how we’ve been using margin-left, padding-right, or border-top forever? Those are physical properties — they’re tied to screen directions. But what if your website needs to support Arabic (RTL) or Japanese (vertical text)? Cue the chaos of flipping every left to right manually.
Logical properties fix this by using logical directions like start and end instead of physical ones. They adapt automatically based on the writing-mode or direction set in your CSS.
Let’s Get Practical: Code Examples
1. Margins & Padding That Just Work
Instead of margin-left, use margin-inline-start. It’ll behave like left in LTR and right in RTL. Same logic for padding and borders.
Old Way (Physical):
.old-box {
margin-left: 20px;
padding-right: 40px;
border-top: 2px solid #f00;
}
New Way (Logical):
.new-box {
margin-inline-start: 20px; /* Left in LTR, Right in RTL */
padding-inline-end: 40px; /* Right in LTR, Left in RTL */
border-block-start: 2px solid #f00; /* Top, always */
}
2. Floats and Text Alignment
Tired of float: left? Try float: inline-start. For text alignment, text-align: start is your new BFF.
.image {
/* Left in LTR, Right in RTL */
float: inline-start;
/* Adds space to the "opposite" side */
margin-inline-end: 15px;
}
.article {
/* No more "left" or "right"! */
text-align: start;
}
3. Sizing for Flexible Layouts
Replace width and height with inline-size (horizontal) and block-size (vertical).
.card {
inline-size: 300px; /* Works like width in horizontal writing */
block-size: 200px; /* Works like height */
min-inline-size: 250px; /* min-width */
}
4. Positioning Like a Pro
Use inset-inline-start instead of left or right.
.modal {
position: fixed;
inset-block-start: 10px; /* Top */
inset-inline-start: 0; /* Left in LTR, Right in RTL */
}
Real-World Demo: A Simple Card
Let’s build a card that flips directions effortlessly.
HTML:
<div class="card" dir="auto"> <! - dir="auto" detects language direction →
<img src="pizza.jpg" alt="A pizza">
<h3>Best Pizza in Town</h3>
<p>Margherita, Pepperoni, and more!</p>
</div>
CSS (Logical Properties):
.card {
direction: rtl;
border: 2px solid #ddd;
padding: 20px;
inline-size: 300px;
margin-inline: auto; /* Centers horizontally */
}
.card img {
float: inline-start;
margin-inline-end: 15px;
block-size: 80px;
}
.card h3 {
margin-block-end: 10px; /* Space below heading */
}
.card p {
color: #666;
}
Try this: Change the dir attribute to rtl, and the image floats to the right! No extra CSS needed.
- One Codebase for All Languages: No more duplicating styles for RTL.
- Vertical Text Support: Perfect for Japanese, Chinese, or creative layouts.
- Cleaner Code: Say goodbye to margin-left: 20px; margin-right: 20px; in RTL overrides.
But Wait… Browser Support?
Most modern browsers (Chrome, Firefox, Edge, Safari) support logical properties. For older browsers, pair them with physical properties as fallbacks:
Here is the complete list of CSS logical properties
1. Flow-Relative Box Model Properties
These replace physical properties like top, left, right, and bottom with logical equivalents.
inset-blockinset-block-startinset-block-endinset-inlineinset-inline-startinset-inline-end
2. Logical Dimensions & Sizing
These replace width, height, min-width, max-width, min-height, and max-height.
block-sizeinline-sizemin-block-sizemax-block-sizemin-inline-sizemax-inline-size
3. Logical Margins
These replace margin-top, margin-bottom, margin-left, and margin-right.
margin-blockmargin-block-startmargin-block-endmargin-inlinemargin-inline-startmargin-inline-end
4. Logical Paddings
These replace padding-top, padding-bottom, padding-left, and padding-right.
padding-blockpadding-block-startpadding-block-endpadding-inlinepadding-inline-startpadding-inline-end
5. Logical Borders
These replace border-top, border-bottom, border-left, and border-right.
border-blockborder-block-startborder-block-endborder-inlineborder-inline-startborder-inline-end
Border Styles
border-block-colorborder-block-start-colorborder-block-end-colorborder-inline-colorborder-inline-start-colorborder-inline-end-colorborder-block-styleborder-block-start-styleborder-block-end-styleborder-inline-styleborder-inline-start-styleborder-inline-end-styleborder-block-widthborder-block-start-widthborder-block-end-widthborder-inline-widthborder-inline-start-widthborder-inline-end-widthborder-start-start-radiusborder-start-end-radiusborder-end-start-radiusborder-end-end-radius
6. Logical Text Alignment
These replace text-align, vertical-align, and related properties.
text-align (works logically in writing modes)text-align-lastvertical-aligntext-justify
7. Writing Mode & Direction
These control the logical flow of content.
writing-modedirectiontext-orientation
8. Scroll & Overflow Logical Properties
These replace overflow-x, overflow-y, etc.
overflow-blockoverflow-inlinescroll-padding-blockscroll-padding-block-startscroll-padding-block-endscroll-padding-inlinescroll-padding-inline-startscroll-padding-inline-endscroll-margin-blockscroll-margin-block-startscroll-margin-block-endscroll-margin-inlinescroll-margin-inline-startscroll-margin-inline-end
Final Thoughts
Logical properties feel weird at first (I kept typing left out of habit!), but once you go logical, you’ll wonder how you survived without them. Start small — try converting margins/padding first — and watch your layouts become bulletproof.
Now go fix that RTL stylesheet you’ve been avoiding! 🚀
Thanks for reading to the end, and have a good day!
You rock! 🙌
(P.S. Need more examples? Hit reply and yell at me.)
Let’s grow, learn, and build amazing things together!
Don’t forget to give it a heart, save it to your list, and follow me.
Let’s stay friends! Stay connected with me on my other platforms:
Top comments (0)