I18n Localization

1---
2name: i18n-localization
3description: Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support.
4allowed-tools: Read, Glob, Grep
5---
6 
7# i18n & Localization
8 
9> Internationalization (i18n) and Localization (L10n) best practices.
10 
11---
12 
13## 1. Core Concepts
14 
15| Term | Meaning |
16|------|---------|
17| **i18n** | Internationalization - making app translatable |
18| **L10n** | Localization - actual translations |
19| **Locale** | Language + Region (en-US, tr-TR) |
20| **RTL** | Right-to-left languages (Arabic, Hebrew) |
21 
22---
23 
24## 2. When to Use i18n
25 
26| Project Type | i18n Needed? |
27|--------------|--------------|
28| Public web app | ✅ Yes |
29| SaaS product | ✅ Yes |
30| Internal tool | ⚠️ Maybe |
31| Single-region app | ⚠️ Consider future |
32| Personal project | ❌ Optional |
33 
34---
35 
36## 3. Implementation Patterns
37 
38### React (react-i18next)
39 
40```tsx
41import { useTranslation } from 'react-i18next';
42 
43function Welcome() {
44  const { t } = useTranslation();
45  return <h1>{t('welcome.title')}</h1>;
46}
47```
48 
49### Next.js (next-intl)
50 
51```tsx
52import { useTranslations } from 'next-intl';
53 
54export default function Page() {
55  const t = useTranslations('Home');
56  return <h1>{t('title')}</h1>;
57}
58```
59 
60### Python (gettext)
61 
62```python
63from gettext import gettext as _
64 
65print(_("Welcome to our app"))
66```
67 
68---
69 
70## 4. File Structure
71 
72```
73locales/
74├── en/
75│   ├── common.json
76│   ├── auth.json
77│   └── errors.json
78├── tr/
79│   ├── common.json
80│   ├── auth.json
81│   └── errors.json
82└── ar/          # RTL
83    └── ...
84```
85 
86---
87 
88## 5. Best Practices
89 
90### DO ✅
91 
92- Use translation keys, not raw text
93- Namespace translations by feature
94- Support pluralization
95- Handle date/number formats per locale
96- Plan for RTL from the start
97- Use ICU message format for complex strings
98 
99### DON'T ❌
100 
101- Hardcode strings in components
102- Concatenate translated strings
103- Assume text length (German is 30% longer)
104- Forget about RTL layout
105- Mix languages in same file
106 
107---
108 
109## 6. Common Issues
110 
111| Issue | Solution |
112|-------|----------|
113| Missing translation | Fallback to default language |
114| Hardcoded strings | Use linter/checker script |
115| Date format | Use Intl.DateTimeFormat |
116| Number format | Use Intl.NumberFormat |
117| Pluralization | Use ICU message format |
118 
119---
120 
121## 7. RTL Support
122 
123```css
124/* CSS Logical Properties */
125.container {
126  margin-inline-start: 1rem;  /* Not margin-left */
127  padding-inline-end: 1rem;   /* Not padding-right */
128}
129 
130[dir="rtl"] .icon {
131  transform: scaleX(-1);
132}
133```
134 
135---
136 
137## 8. Checklist
138 
139Before shipping:
140 
141- [ ] All user-facing strings use translation keys
142- [ ] Locale files exist for all supported languages
143- [ ] Date/number formatting uses Intl API
144- [ ] RTL layout tested (if applicable)
145- [ ] Fallback language configured
146- [ ] No hardcoded strings in components
147 
148---
149 
150## Script
151 
152| Script | Purpose | Command |
153|--------|---------|---------|
154| `scripts/i18n_checker.py` | Detect hardcoded strings & missing translations | `python scripts/i18n_checker.py <project_path>` |
155