rtl-internationalization
Installation
SKILL.md
RTL (Right-to-Left) Internationalization
Supporting RTL languages such as Hebrew, Arabic, Persian, and Urdu requires building layouts with direction-agnostic CSS and treating text direction as a first-class, runtime-switchable property rather than a fixed assumption baked into left/right styles.
Workflow for Making a UI RTL-Safe
- Audit for physical properties — Search the codebase for
margin-left/right,padding-left/right,left/rightpositioning,text-align: left/right, and Tailwind classes likeml-*,mr-*,pl-*,pr-*,left-*,right-*. - Convert to logical properties — Replace each physical property/class with its logical equivalent (
margin-inline-start,ms-*, etc.) so the browser flips it automatically based ondir. - Set direction at the root — Apply
dir="rtl"(ordir="auto") on<html>or a top-level container, driven by the active locale, not hardcoded per component. - Handle mixed-script text — Wrap user-generated or interpolated strings that may differ in direction from the surrounding text with
<bdi>. - Audit icons and directional components — Mirror arrows, chevrons, and back/forward buttons; leave non-directional icons (search, settings, home) unmirrored; reverse carousels, sliders, and progress bars.
- Externalize all strings — Route every user-facing string through a translation function and use
IntlAPIs for numbers, currency, and dates instead of manual formatting. - Test in RTL — Render the app with
dir="rtl"and real RTL content (not just mirrored LTR placeholder text) and visually verify every screen.
Logical CSS Properties
Always use CSS logical properties instead of physical ones — logical properties resolve to the correct physical side automatically based on the element's direction and writing-mode, so the same stylesheet works for LTR and RTL without duplication.