4 min read · 2026-10-26
Physical properties are the bug
Why margin-left is a directional bug, what logical properties actually resolve to, and the cases where the physical value was right.
margin-left: 24px is not a styling decision. It is an assertion that the
gutter belongs on the left, and in a right-to-left document the left is the end of the
line, not the beginning. The browser obeys the assertion, the layout breaks, and the
bug is filed against "RTL support".
What logical properties resolve to
Logical properties name a side by its role in the writing mode: inline-start
is where the line begins, block-start is where the first line sits. With
dir="rtl", inline-start resolves to the right, and the same CSS produces a
mirrored layout with no second stylesheet.
| physical | logical |
|---|---|
| margin-left / right | margin-inline-start / end |
| padding-left / right | padding-inline-start / end |
| border-left | border-inline-start |
| left / right | inset-inline-start / end |
| border-top-left-radius | border-start-start-radius |
| text-align: left | text-align: start |
| float: left | float: inline-start |
The radius names stack two axes and that is why they read strangely:
border-start-start-radius is the corner at the start of the first line in
the block direction — top-left in ltr, top-right in rtl.
When the physical value was right
Conversion is not a find-and-replace, and a tool that pretends otherwise is dangerous. Keep the physical side when the thing you are positioning has a physical meaning:
- A scrollbar or overflow shadow pinned to the device edge, not the text edge.
- A map control anchored to the compass rather than the reading direction.
- A sprite or background image whose pixels were drawn for one direction.
- A video player's progress bar, which follows the media's own timeline.
Everything else — padding inside a card, a border that marks the start of a list item, the space beside an avatar — is inline-axis spacing and should be logical.
Flexbox already knew
flex-direction: row follows the writing direction, so a row of items
reverses on its own. Where teams get bitten is inside the item: a hard-coded
margin-right between two items survives the reversal and turns a gap into
an overlap. Replace it with gap and the question disappears.
How to find them
A text scan finds the declarations that are wrong by definition — the six properties in the table above — and nothing more. It cannot see a logo that should have been mirrored or a chart whose axis did not flip, because those are decisions about content.
The RTL audit does that scan on pasted CSS or markup and converts only the declarations it can justify, leaving markup and class names alone. Read the diff before you paste it back.