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.
如何使用
- Paste your CSS in the input box.
- 选择一个方向—— Physical → Logical for i18n-ready CSS, or Logical → Physical to see the visual equivalent.
- Choose a writing mode — LTR (inline-start = left) or RTL (inline-start = right) — to control how left/right map.
- Copy or download the converted CSS from the right pane.
特征
- 双向转换 – 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.
- 实时转换 – 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.
- 仅客户端 – Nothing is uploaded to a server.
常问问题
-
What are CSS logical properties?
Logical properties describe the box model in terms of inline-start, inline-end, block-start and block-end instead of left, right, top and bottom. They follow the element's writing-mode and direction, so the same rule flips automatically between LTR and RTL languages.
-
Why use logical properties instead of physical ones?
They make a single stylesheet work for left-to-right and right-to-left languages without RTL-specific overrides, and they extend naturally to vertical writing modes used by Japanese, Chinese and Mongolian scripts.
-
How does the inline-start direction map to a physical side?
In horizontal-tb writing mode, inline-start is the left edge in LTR and the right edge in RTL. block-start is always the top in horizontal writing modes. In vertical-rl or vertical-lr modes, block-start and inline-start rotate to physical sides accordingly.
-
Are logical properties supported by browsers?
All evergreen browsers — Chrome, Edge, Firefox and Safari — support the margin-*, padding-*, border-*, inset-*, inline-size and block-size logical properties. Older shipping versions back to 2020 cover most of the surface, with border-start-start-radius corners and overflow-inline/block being the most recent additions.
-
Why does the converter leave the margin and padding shorthands alone?
The four-value margin and padding shorthands are positional (top right bottom left), and CSS does not have an equivalent four-value logical shorthand, so a safe one-to-one conversion is not possible. Only longhand declarations like margin-left or padding-block-start can be transformed deterministically.
