Skip to content
PostCSS Logical Polyfill

LTR and RTL CSS logical polyfill

Compile logical properties into one stylesheet with LTR and RTL physical-property rules for older browsers and WebViews.
Get Started Playground GitHub

Quick Example

Section titled “Quick Example”
Input
/* Input */
.container {
  margin-inline: 1rem 2px;
  padding-block: 2rem;
}
[dir="rtl"] .container {
  border-inline-start: 2px solid blue;
}
Output
/* Output */
.container {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
[dir="ltr"] .container {
  margin-left: 1rem;
  margin-right: 2px;
}
[dir="rtl"] .container {
  margin-right: 1rem;
  margin-left: 2px;
}
[dir="rtl"] .container {
  border-right: 2px solid blue;
}

Features

Section titled “Features”

Polyfill Direction

Transforms logical properties into physical properties with horizontal LTR and RTL scopes

Smart Generation

Creates both LTR and RTL versions automatically

Optimized Output

Block-direction properties generate single rules (no duplication)

Extended Support

Includes scroll properties and logical values via integrated shim

Experimental Features

Linear gradient logical directions and draft CSS specs

Configurable

Custom selectors and output order control

Why Use This Plugin?

Section titled “Why Use This Plugin?”

Use this plugin when you write logical properties, need physical-property compatibility for your target browsers, and want both horizontal LTR and RTL rules in one stylesheet.

If your browsers already support the logical properties you use, native CSS is sufficient. For a fixed compile-time direction, consider postcss-logical; for mirroring existing physical styles, consider RTLCSS. See the introduction for alternatives and compatibility limits.

Set an explicit <html dir="ltr"> or <html dir="rtl"> so the default direction selectors match. Browser support depends on the physical properties and values in the generated output.

What It Does

Section titled “What It Does”

This plugin transforms CSS Logical Properties into physical properties with appropriate direction selectors for browser compatibility. It intelligently processes:

  • Supported logical properties (margin, padding, border, inset, sizing, etc.)
  • Logical values (float: inline-start, clear: inline-end, resize: block)
  • Scroll properties (scroll-margin, scroll-padding)
  • Overflow properties (overflow-block, overflow-inline)
  • CSS Containment properties (contain-intrinsic-block-size, contain-intrinsic-inline-size)
  • Experimental features (linear-gradient logical directions)
  • Both scoped and unscoped logical properties