Internationalisation

`i18n/logical-properties`

In projects with a right-to-left locale, layout uses logical properties (margin-inline-start, inset-inline-end, text-align start).

moderatemanualfe-i18n

Why

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.

Fix

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).

Examples

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

Sources

Facts

Id: i18n/logical-properties
Severity: moderate
Check: manual a person reviews it; the report lists it as a checklist
Applies to: css scss less
Taught by the skill: fe-i18n Internationalisation
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

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