ClientSideTools Privacy-First Browser Tools

CSS Logical Properties Converter

International layouts need logical properties (margin-inline, inset-block) so they adapt to RTL and vertical writing modes. Convert physical ⇄ logical CSS and preview how it behaves in four writing modes.

SVG & CSS Engineering Local processing Your CSS stays in your browser. Nothing is uploaded.

Tool interface

Introduction

Logical properties tie layout to the writing mode instead of the physical screen, which is essential for i18n. This tool automates the conversion and shows the payoff across modes.

How it works

  • Maps each physical longhand to its logical equivalent (or vice versa).
  • Maps text-align/float/resize values.
  • Applies the result to four writing-mode previews.
  • Lists every conversion performed.

Privacy

All conversion is local. No upload, no account, no API key.

Limitations

  • Shorthands are not expanded or mapped.
  • Assumes a horizontal-tb source writing mode for start/end mapping.

FAQ

What does margin-inline-start mean in RTL?

In RTL, inline-start is the right side, so the margin flips automatically.

Is my CSS uploaded?

No. Everything runs locally.

Related tools

Version and changelog

  • Version: 1.0.0
  • Last updated: August 12, 2026
  • Changelog: Initial production release.