localization-design

Use flexible heights and widths instead of fixed containers sized to English copy. Test layouts with German or Finnish as worst-case proxies, apply min-width rather than fixed width on buttons, and use truncation with tooltips only as a last resort.

Use CSS logical properties such as margin-inline-start and padding-block-end instead of directional ones like margin-left, and set text-align: start. These flip automatically when dir="rtl" is applied, mirroring the layout without duplicate stylesheets.

Logos, brand marks, clocks, mathematical notation, and most images stay unmirrored in RTL. Numerals also remain left-to-right within RTL text. Only directional icons like arrows and chevrons should flip; neutral icons like cameras do not.

Yes. Red signals luck in China but danger in Western contexts, and white signifies mourning in many East Asian cultures. Never rely on color alone for semantic meaning, and validate palettes with cultural consultants for global products.

Use pseudo-localization, which replaces characters with extended lookalikes to simulate expansion and special character handling. Also test components with at least one RTL locale and one long-expansion locale before adding them to a design system.