i18n/logical-properties

Dlaczego

margin-left, padding-right, left: 0 and text-align: left stay on the same physical side when the page switches to dir="rtl", so icons sit on the wrong side of labels and menus open off-screen. Overrides for every rule under [dir="rtl"] double the CSS and drift out of sync.

Poprawka

Use the logical forms: margin-inline-start, padding-inline-end, inset-inline-start, border-start-start-radius, text-align: start. Flip directional icons (arrows, chevrons) with :dir(rtl) .icon-arrow { transform: scaleX(-1); }, but not logos, media controls or checkmarks. In a project with only left-to-right locales this is a good habit, not a defect (lane A's css/logical-properties covers it there).

Przykłady

/* bad */
.badge { margin-left: 0.5rem; text-align: left; }
/* good */
.badge { margin-inline-start: 0.5rem; text-align: start; }

Źródła

• MDN, CSS logical properties and values
• W3C Internationalization, CSS vs markup for bidi support

Przeczytaj w terminalu

npx github:dawidolko/frontend-skills explain i18n/logical-properties