CSS Logical Properties Converter
Transpile bidirectional CSS logical properties (inline, block, start, end) into physical directional rules for LTR and RTL compatibility.
CSS Logical Source Code
Physical Output (LTR)
Live Conversion Matrix Reference (Common CSS Properties)
Active Direction: ltr| CSS Logical Property | LTR Physical Equivalent | RTL Physical Equivalent | Category |
|---|---|---|---|
| margin-inline-start | margin-left | margin-right | Box Model |
| margin-inline-end | margin-right | margin-left | Box Model |
| padding-inline-start | padding-left | padding-right | Box Model |
| inline-size | width | width | Sizing |
| block-size | height | height | Sizing |
| inset-inline-start | left | right | Positioning |
| border-start-start-radius | border-top-left-radius | border-top-right-radius | Borders |
| text-align: start | text-align: left | text-align: right | Typography |
Architectural Foundations: CSS Logical Properties vs. Physical Direction
For decades, CSS relied entirely on physical directions (top, right, bottom, left) tied directly to screen coordinates. As global web applications expanded into multilingual markets supporting bidirectional writing modes, pairing modern layout models with scalable units like our Pixels to REM Converter became essential. Building without flow-relative dimensions forced developers to maintain duplicate stylesheets or messy overrides such as [dir="rtl"] .card { margin-left: 0; margin-right: 1.5rem; }.
The Inline Axis
Defines the axis parallel to the flow of text within a line. In standard English (LTR horizontal), inline runs left-to-right. In Arabic or Hebrew (RTL horizontal), inline flows right-to-left. In vertical writing systems (CJK vertical), inline runs top-to-bottom.
The Block Axis
Defines the axis perpendicular to inline text flow, matching the direction new paragraphs stack. In horizontal writing modes, block-start corresponds to the top, and block-end corresponds to the bottom.
Start & End Anchors
Instead of rigid left and right boundaries, logical properties rely on start (where reading begins) and end (where reading terminates). Switching document direction immediately mirrors the entire user interface.
Legacy Constraints: Why Transpilation Remains Crucial
While modern evergreen browsers and layout tools like the CSS Flexbox Sandbox seamlessly adapt to bidirectional flow, legacy rendering pipelines often fail to interpret logical properties:
HTML Email & PDF Generation Engines
Desktop Microsoft Outlook (Word-based rendering engine), older Thunderbird releases, and server-side PDF tools (WeasyPrint, PrinceXML, older wkhtmltopdf) strictly require physical directions such as margin-left and padding-right. Feeding logical rules into these tools yields broken layouts.
Embedded WebViews & Smart TVs
Connected smart TVs (Tizen OS, webOS), point-of-sale displays, in-car infotainment screens, and legacy Android WebViews (pre-Chromium 69) frequently drop logical properties silently, collapsing margins and alignment.
Refactoring Legacy Codebases: Physical to Logical Migration
Migrating an existing design system to modern international standards requires converting thousands of lines of directional CSS into semantic flow properties. By selecting the Physical → Logical option above, you can instantly upgrade legacy CSS:
Frequently Asked Questions (FAQ)
What are CSS Logical Properties and why are they used?
CSS Logical Properties and Values specify layout dimensions and offsets relative to flow direction (inline and block) rather than physical screen coordinates (top, bottom, left, right). This enables seamless internationalization between left-to-right (LTR) and right-to-left (RTL) scripts such as Arabic or Hebrew without separate stylesheet overrides.
Why would I need to transpile logical CSS back into physical directions?
Legacy email clients, embedded WebViews, older Chromium/Safari builds, PDF generation engines (such as Puppeteer, WeasyPrint, PrinceXML), and legacy mobile browsers often lack complete CSS Logical Properties specification support. Transpiling to physical directional properties guarantees visual fidelity.
How does the converter handle two-value shorthands like margin-inline: 1rem 2rem?
When the shorthand expansion setting is activated, margin-inline: 1rem 2rem is expanded into margin-left: 1rem; margin-right: 2rem; for LTR modes, and automatically inverted to margin-right: 1rem; margin-left: 2rem; for RTL stylesheets.
Does this tool transpile in reverse from Physical to Logical?
Yes. By toggling to Physical to Logical mode, you can modernize legacy CSS codebases by mapping old directional rules (e.g. margin-left, padding-right, border-top-left-radius) directly into modern internationalized standards like margin-inline-start and border-start-start-radius.
Is my proprietary CSS code sent to any remote servers?
No. All lexical parsing, AST regex conversions, and transpilation take place 100% locally in your browser memory. No code snippets, project styles, or telemetry leave your machine.
Related & Complementary Utilities
Explore more privacy-first client-side web tools.
HTML Entity Encoder / Decoder Suite
Convert special HTML characters (&, <, >, quotes) into secure HTML entities and decode numeric or named entities back into raw markup safely in real time.
Regex Tester, Explainer & Cheat Sheet
Test, debug, and explain regular expressions in real-time with native JavaScript RegExp engine, flag toggles, match highlighting, group captures, and a comprehensive syntax cheat sheet — 100% client-side.
CSS Triangle & Polygon Generator
Interactive pure CSS border triangle and CSS3 clip-path polygon generator with draggable vertices.
CSS Container Query (CQ) & Size-Container Formatter
Visual @container builder with live interactive resizing, CQ unit previews, and CSS export.