CSS Logical Properties Converter

CSS Logical Properties Converter

Paste a block of CSS and instantly swap physical box-model properties (margin-left, padding-right, border-top-left-radius, top/left/right/bottom, width/height) for their writing-mode-aware logical equivalents (margin-inline-start, padding-inline-end, border-start-start-radius, inset-block-start, inline-size) — or reverse the conversion. The mapping is fully deterministic and covers margin, padding, border, border-radius corners, inset positions, sizing, overflow, plus directional values for text-align, float and clear.

Comment utiliser

1. Paste your CSS in the input box.
2. Choisissez une direction — Physical → Logical for i18n-ready CSS, or Logical → Physical to see the visual equivalent.
3. Choose a writing mode — LTR (inline-start = left) or RTL (inline-start = right) — to control how left/right map.
4. Copy or download the converted CSS from the right pane.

Caractéristiques

• Conversion bidirectionnelle – Physical → Logical and Logical → Physical with one click.
• Full property coverage – margin, padding, border longhand and individual sides, border-radius corners, top/right/bottom/left insets, width/height + min/max, overflow-x/y.
• Directional values – Converts text-align, float and clear values (left/right ↔ start/end / inline-start/inline-end).
• Writing-mode aware – LTR/RTL selector controls which physical side maps to inline-start.
• Conversion en temps réel – Output updates as you type or toggle options.
• Safe for shorthands – Property names are anchored so border-top-left-radius is never confused with a stray left declaration.
• Côté client uniquement – Nothing is uploaded to a server.