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.