jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

CSS Logical Properties Converter

Turn physical CSS values like margin-left and padding-right into logical equivalents such as margin-inline-start and padding-inline-end. Write CSS once that adapts to LTR, RTL, and vertical writing modes.

Loading tool...

What is CSS Logical Properties Converter?

CSS logical properties use writing-mode-relative directions instead of physical directions. Inline (text flow direction) and Block (perpendicular direction) replace Left, Right, Top, and Bottom. This means the same CSS works for left-to-right, right-to-left, and vertical languages without overrides. For example, margin-inline-start applies to the left side in LTR and the right side in RTL.

Quick answer

Convert physical CSS properties such as margin-left and padding-right into writing-mode-aware logical equivalents. This helps layouts adapt automatically to right-to-left and vertical writing modes without separate overrides.

Limitations

  • Some shorthand logical properties such as border-inline, border-block, and inset-inline have spotty browser support compared to the core longhand logical properties.
  • The converter handles single property conversion. Migrating a large stylesheet to logical properties requires updating each physical-to-logical pair and verifying no mixed-direction edge cases remain.

How to use this tool

  1. Choose the physical CSS property you want to convert, such as margin-left or padding-right.
  2. Select the logical equivalent from the available suggestions.
  3. Enter the value for the property.
  4. Copy the logical property declaration into your stylesheet and test in both LTR and RTL directions.

What you can use it for

  • Prepare CSS that works for multilingual websites with RTL language support.
  • Write direction-agnostic component styles that do not need separate RTL overrides.
  • Reduce the need for a separate RTL stylesheet by using logical properties from the start.

Use cases

Practical examples

Example

Card with automatic RTL support

A card component uses margin-inline-end instead of margin-right. In RTL mode, the spacing flips automatically without additional CSS overrides.

Example

Vertical writing mode layout

A layout uses padding-block-start instead of padding-top so the spacing stays correct in vertical writing mode where top and bottom have different meaning.

Common mistakes

  • Converting every physical property without checking browser support for the specific logical property variant.
  • Mixing physical and logical properties in the same declaration, which can cause inconsistent behavior across writing modes.
  • Assuming all logical properties have full browser support. Some shorthand logical properties are newer than the core set.

Verification

  1. Apply the converted properties to a page and switch the direction attribute from ltr to rtl on the html element to verify the layout flips correctly.
  2. Test the page in both LTR and RTL modes to confirm spacing, borders, and alignment behave as expected in each direction.

FAQ

Questions about CSS Logical Properties Converter

Do all browsers support logical properties?

Chrome 87+, Edge 87+, Safari 15+, and Firefox 66+ support the core set of logical properties. Some shorthand variants are newer. Check support for the specific property you plan to use.

Should I replace all physical properties with logical ones?

For multilingual sites with RTL or vertical language support, yes. For English-only sites, logical properties are still fine to use but physical properties remain valid and are simpler to read.

What is the difference between inline and block axis?

The inline axis follows the direction text flows. In English, the inline axis is horizontal. The block axis runs perpendicular to the text flow, which is vertical in English. In a vertical writing mode these directions swap.

Are logical properties supported everywhere?

The core logical properties such as margin-inline-start and padding-block-end are widely supported in Chrome 87+, Edge 87+, Safari 15+, and Firefox 66+. Some shorthand logical properties like border-inline have newer support, so check compatibility for the specific variant you plan to use.

Related tools

More css tools

Also try

Also try