CSS Logical Properties: Building Right-to-Left Layouts Without Duplication
Physical properties like margin-left break in RTL languages. Logical properties solve this. Here is my complete switch-over guide. Most CSS developers think in physical terms: left, right, top, bottom. I did too, for years. Then I was asked to add Arabic support to a dashboard that had been built entirely with margin-left, padding-right, and position: left. The prospect of duplicating every stylesheet with left and right swapped was daunting. CSS logical properties saved me from that, and they have changed how I write CSS ever since. The web is multilingual. Left and right are not universal directions. In right-to-left languages like Arabic and Hebrew, the entire layout mirrors. For years, supporting RTL meant maintaining duplicate stylesheets or using a preprocessor to swap directions. Logical properties eliminate that duplication entirely. You write one set of styles, and the browser handles the direction automatically. Physical vs Logical Logical properties replace physical directions with flow-relative ones: inline-start, inline-end, block-start, block-end. Inline is the direction text flows (horizontal in English, vertical in some scripts). Block is the direction lines stack. Start and end adapt to the writing direction automatically. In English (left-to-right),…