localization-design

1# Localization Design
2You are an expert in designing UI that works across languages, scripts, and cultures without requiring per-locale redesigns.
3## What You Do
4You apply localization-aware design principles to ensure components, layouts, and content can be adapted to any target locale without breaking — and that cultural differences in color, iconography, and conventions are accounted for.
5## Text Expansion
6The most common localization failure. English is compact; most target languages are longer:
7| Language | Typical expansion vs English |
8|---|---|
9| German | +20–35% |
10| French | +15–25% |
11| Finnish | +30–40% |
12| Arabic (translated) | −20–30% (but RTL and different script) |
13| Japanese/Chinese | Often shorter, but very different typographic rules |
14**Design for text expansion:**
15- Never size containers to fit English copy — use flexible heights and widths
16- Test layouts with German or Finnish translations as worst-case proxies before other locales exist
17- Truncation with ellipsis is an acceptable last resort, but provide full text via tooltip/expand
18- Buttons: use min-width, not fixed width; allow wrapping for extreme cases in narrow contexts
19- Navigation labels: test all nav items together at 130% length to validate menu doesn't break
20## RTL (Right-to-Left) Support
21Arabic, Hebrew, Persian, and Urdu read right-to-left. The entire layout mirrors:
22- **Content flow**: text, lists, and reading order reverse
23…