jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

Free 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.

quickAnswer

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.

Last updated: 2026-06-11

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.
  • Logical properties map to physical properties based on the writing-mode and direction of the element. A single inline-start maps to left in LTR and right in RTL. This means the generated code behaves differently depending on the document language direction, which requires testing in both LTR and RTL modes.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

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.

Related tools

More css tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Also try

Also try

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool