Logical Properties & i18n

Stop using margin-left and margin-right. Use logical properties to build layouts that adapt to any language automatically.

CSS5 min readConcept 40 of 43

Physical vs Logical

For decades, we styled elements using physical coordinates: margin-left, padding-top, border-bottom, and width / height.

The problem is that physical properties are hardcoded to the screen. If you add margin-left: 20px to an icon so it sits nicely next to text, it looks great in English (Left-to-Right).

But if you translate that page to Arabic (Right-to-Left), the icon still has margin on the left, but the text is now on the right. The layout breaks.

CSS Logical Properties replace the physical compass (top, right, bottom, left) with a flow-relative compass (block-start, inline-end, block-end, inline-start).

Automatic Internationalization (i18n)

Logical properties adapt to the dir (direction) and writing-mode of the document automatically.

Instead of margin-left, you use margin-inline-start. In English, inline-start resolves to the left. In Arabic, the browser automatically resolves inline-start to the right. In vertical Japanese, inline-start resolves to the top.

This means you can write one stylesheet for your app, and it will support global languages with zero extra effort. No more complex RTL CSS overrides.

The new vocabulary

block: The axis that blocks stack on. In English, blocks stack from top to bottom. Therefore, block-start is Top, and block-end is Bottom.

inline: The axis that text flows along. In English, text flows from left to right. Therefore, inline-start is Left, and inline-end is Right.

So, padding-top becomes padding-block-start. border-right becomes border-inline-end. width becomes inline-size. height becomes block-size.

Try it

Toggle the language modes below. Watch how the layout built with physical properties breaks when translated, while the logical layout adapts flawlessly.

Physical vs Logical Properties

Change Language Mode

// Legacy Physical Properties (Breaks in i18n)
.card-physical {
border-left: 4px solid #f43f5e;
margin-left: 24px;
padding-left: 16px;
}
// Modern Logical Properties (Adapts automatically)
.card-logical {
border-inline-start: 4px solid #10b981;
margin-inline-start: 24px;
padding-inline-start: 16px;
}
Physical Layout
P

Physical Card

Always stays on the left.

Logical Layout
L

Logical Card

Adapts to the reading direction.

English (LTR)

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Which logical property replaces `margin-left` in a standard English (LTR) document?
  2. 2If you apply `margin-inline-start: 1rem;` to an element, and the document is set to Arabic (`dir="rtl"`), where will the margin appear?
  3. 3What is the logical equivalent of `width` in a standard horizontal document?

Remember this

  • Logical properties adapt automatically to the document's direction and writing-mode.
  • inline replaces Left/Right. inline-start is where you start reading a line.
  • block replaces Top/Bottom. block-start is where the first block of text appears.
  • Use inline-size and block-size instead of width and height.

Done with this concept?

Mark it complete to track your progress. No login needed.