i18n-localization

Internationalization & Localization

Comprehensive guide for building globally-ready applications.

Key Concepts

Terminology

i18n (Internationalization):
- Engineering for multiple languages/regions
- Building the infrastructure
- Happens once, during development

L10n (Localization):
- Adapting for specific locale
- Translation, formatting, content
- Happens per locale, ongoing

Locale:
- Language + Region combination
- Format: language-REGION (e.g., en-US, pt-BR)
- Determines formatting rules

What Needs Localization?

Category	Examples
Text	UI labels, messages, errors
Numbers	1,234.56 vs 1.234,56
Dates	MM/DD/YYYY vs DD/MM/YYYY
Times	12-hour vs 24-hour
Currency	$1,234.56 vs €1.234,56
Plurals	1 item vs 2 items vs 5 items
Direction	LTR vs RTL
Images	Cultural appropriateness
Colors	Cultural significance
Names	Order, formality

---

Text & Messages

Externalize All Strings

// DON'T: Hardcoded strings
const message = "Welcome back, " + username;

// DO: Externalized, translatable
const message = t('welcome_back', { name: username });

// Translation file (en.json)
{
  "welcome_back": "Welcome back, {{name}}"
}

// Translation file (es.json)
{
  "welcome_back": "Bienvenido de nuevo, {{name}}"
}

Message Format

// ICU Message Format (recommended)
// Handles plurals, select, dates, numbers

// Simple
"greeting": "Hello, {name}!"

// Plural
"items_count": "{count, plural, =0 {No items} one {# item} other {# items}}"

// Select (gender, etc.)
"notification": "{gender, select, male {He} female {She} other {They}} liked your post"

// Nested
"cart": "{itemCount, plural,
  =0 {Your cart is empty}
  one {You have # item in your cart}
  other {You have # items in your cart}
}"