It’s Not 1999 Anymore: Use CSS Logical Properties to Build Smarter Layouts

Stop Fighting RTL Layouts: Use CSS Logical Properties for Better Design

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 */
}

Follow and Subscribe:

| SubStack | Medium | The Conversion Brief | Community: Dev Community | Bluesky | LinkedIn | Hackernoon |

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:

.fallback-box {
 margin-left: 20px; /* Fallback */
 margin-inline-start: 20px;
}

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-block
inset-block-start
inset-block-end
inset-inline
inset-inline-start
inset-inline-end

2. Logical Dimensions & Sizing

These replace width, height, min-width, max-width, min-height, and max-height.

block-size
inline-size
min-block-size
max-block-size
min-inline-size
max-inline-size

3. Logical Margins

These replace margin-top, margin-bottom, margin-left, and margin-right.

margin-block
margin-block-start
margin-block-end
margin-inline
margin-inline-start
margin-inline-end

4. Logical Paddings

These replace padding-top, padding-bottom, padding-left, and padding-right.

padding-block
padding-block-start
padding-block-end
padding-inline
padding-inline-start
padding-inline-end

5. Logical Borders

These replace border-top, border-bottom, border-left, and border-right.

border-block
border-block-start
border-block-end
border-inline
border-inline-start
border-inline-end

Border Styles

border-block-color
border-block-start-color
border-block-end-color
border-inline-color
border-inline-start-color
border-inline-end-color
border-block-style
border-block-start-style
border-block-end-style
border-inline-style
border-inline-start-style
border-inline-end-style
border-block-width
border-block-start-width
border-block-end-width
border-inline-width
border-inline-start-width
border-inline-end-width
border-start-start-radius
border-start-end-radius
border-end-start-radius
border-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-last
vertical-align
text-justify

7. Writing Mode & Direction

These control the logical flow of content.

writing-mode
direction
text-orientation

8. Scroll & Overflow Logical Properties

These replace overflow-x, overflow-y, etc.

overflow-block
overflow-inline
scroll-padding-block
scroll-padding-block-start
scroll-padding-block-end
scroll-padding-inline
scroll-padding-inline-start
scroll-padding-inline-end
scroll-margin-block
scroll-margin-block-start
scroll-margin-block-end
scroll-margin-inline
scroll-margin-inline-start
scroll-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.)

The internet doesn’t have to be dull. Hit subscribe on Developer’s Journey and see what’s possible. Click below and subscribe now
Available for freelance projects on Upwork

Let’s grow, learn, and build amazing things together!
Build smarter layouts that work everywhere. Write once, adapt to any language.
© M Usman 🫰
WordPress Developer | Website Strategist | SEO Specialist