CSS Logical Properties

What this tool is used for

• Converting a stylesheet so it works in right-to-left languages without a separate sheet.
• Replacing directional margins with flow-relative ones during an internationalisation pass.
• Learning the logical equivalent of a property you use constantly.
• Auditing a component for physical properties that will break in RTL.
• Producing a converted block to compare against the original.

Frequently Asked Questions

What do block and inline mean here?

Inline is the direction text runs; block is the direction lines stack. In English those are horizontal and vertical, so `margin-inline-start` is `margin-left` — but in Arabic or Hebrew it becomes `margin-right`, and in vertical Japanese the two axes swap entirely.

Why bother if my site is English-only?

Two reasons that apply anyway: one property replaces two (`margin-inline: 1rem` sets both sides), and a component written logically can be dropped into an RTL context later without a second stylesheet. If neither matters to you, physical properties are not wrong.

What is the shorthand?

`margin-block` and `margin-inline` each take one or two values — `margin-block: 1rem 2rem` is start then end. The same pattern applies to padding, border, and `inset` for positioning, where `inset-inline-start` replaces `left`.

Do width and height have equivalents?

Yes: `inline-size` and `block-size`, with `min-` and `max-` variants. These are the ones people forget, and they matter most — a fixed `width` on a component breaks in vertical writing modes exactly where `inline-size` would have adapted.

What browser support do they have?

The margin, padding, border and inset properties have been supported across every current browser since around 2019–2021, so they are safe today. If you must support very old browsers, keep a physical fallback declaration *before* the logical one.

What happens when I mix logical and physical properties?

They compete through the normal cascade, and the later declaration wins regardless of which kind it is. `margin-inline-start` followed by `margin-left` leaves the physical value in place, which is why partial migrations produce puzzling results.

Do they follow vertical writing modes too?

Yes — that is the point. In `writing-mode: vertical-rl` the inline axis runs top to bottom, so `padding-inline` becomes vertical padding. Physical properties keep their screen meaning and stop tracking the text.

Common errors and gotchas

• Converting only some properties, which leaves a component half-adapted and worse than either.
• Assuming logical properties handle RTL entirely, when icons, shadows and imagery also need flipping.
• Converting a property where physical direction was genuinely intended, such as a fixed drop shadow.
• Overlooking that inline and block axes swap in vertical writing modes, not just RTL.
• Mixing logical and physical properties on the same element, where precedence gets confusing.