Logical properties, and the day you go multilingual

CSS was written with left-to-right, top-to-bottom text as the assumption, and the property names still carry it: margin-left, padding-right, text-align: left, border-top. In a language written right to left, every one of those means the wrong side.

Logical properties name the sides by their role rather than their position. The inline axis is the direction text flows; the block axis is the direction lines stack. So margin-inline-start is the side where text begins, left in English, right in Arabic, and padding-block-end is below the content in English and still below it in Japanese vertical text, which is a different physical direction entirely.

The mapping is mostly mechanical: margin-left becomes margin-inline-start, width becomes inline-size, top/bottom become inset-block-start/inset-block-end. There are useful shorthands too, margin-inline: 16px sets both inline sides, padding-block: 8px both block sides, and inset: 0 sets all four.

The argument for adopting it now is not internationalisation, or not only. It is that retrofitting is really painful, it means auditing every declaration in a codebase rather than writing slightly different property names as you go. The cost today is a few extra characters; the cost in two years is a sprint. And there is a smaller immediate payoff: margin-inline: auto for horizontal centring reads as what it means, and works whichever way the text runs.

A caveat so you do not over-apply it. Some things really are physical. A box-shadow offset that implies light from above stays 0 2px. An icon that points at something on screen stays where it is. Logical properties are for layout that follows the text; physical ones are still correct for things that follow the world.

Set dir="rtl" on the <html> element of your own page and reload it. Whatever breaks is a physical property you will have to change eventually. It takes ten seconds and it is the most direct answer to "does this matter for me" that exists.