Localization (l10n)

Core Principles

• Localization (l10n) builds on internationalization (i18n)
• Ensure all user-facing text supports localization
• Adapt content for cultural appropriateness
• Respect regional conventions for dates, numbers, and currency
• Design for content that varies significantly between locales

Localization Libraries

Web Applications

• Use i18next and react-i18next for web applications
• Implement namespace-based translation organization
• Use libraries like react-intl or next-i18next for Next.js applications
• Leverage formatjs for ICU message format support

Mobile Applications

• Use expo-localization for React Native apps
• Use react-native-i18n or expo-localization for internationalization and localization
• Support multiple languages with fallback mechanisms
• Handle device locale detection automatically

Translation Management

File Organization

locales/
  en-US/
    common.json
    legal.json
    marketing.json
  en-GB/
    common.json
    legal.json
    marketing.json
  es-ES/
    common.json
    legal.json
    marketing.json
  es-MX/
    common.json
    legal.json
    marketing.json

Regional Variants

• Support regional language variants (en-US vs en-GB, es-ES vs es-MX)
• Implement fallback chains (es-MX -> es -> en)
• Handle spelling differences (color vs colour)
• Adapt terminology for regional preferences

Locale-Specific Formatting

Date and Time Formatting

// Format dates according to locale
const formatDate = (date: Date, locale: string) => {
  return new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(date);
};

// US: January 23, 2026
// UK: 23 January 2026
// Germany: 23. Januar 2026

Number Formatting

// Format numbers according to locale
const formatNumber = (num: number, locale: string) => {
  return new Intl.NumberFormat(locale).format(num);
};

// US: 1,234,567.89
// Germany: 1.234.567,89
// France: 1 234 567,89

Currency Formatting

// Format currency according to locale
const formatCurrency = (amount: number, locale: string, currency: string) => {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currency
  }).format(amount);
};

// US/USD: $1,234.56
// Germany/EUR: 1.234,56 EUR
// Japan/JPY: JPY 1,235

Cultural Adaptation

Content Localization

• Adapt imagery for cultural appropriateness
• Localize marketing content, not just translate
• Consider cultural sensitivities in color choices
• Adapt examples and references for local relevance

Legal and Compliance

• Localize privacy policies and terms of service
• Adapt for regional legal requirements (GDPR, CCPA)
• Display appropriate regulatory information
• Handle region-specific disclaimers

Layout and Typography

Text Expansion

• Design for 30-50% text expansion from English
• Use flexible layouts that accommodate longer text
• Test with German (often longest) and Chinese (often shortest)
• Avoid fixed-width containers for text

RTL Support

• Implement full RTL (right-to-left) support for Arabic, Hebrew, etc.
• Use CSS logical properties for directional layouts
• Mirror UI elements appropriately
• Handle bidirectional text (mixed LTR/RTL)

/* Use logical properties for RTL support */
.card {
  margin-inline-start: 1rem;
  padding-inline-end: 0.5rem;
  text-align: start;
}

Typography Considerations

• Use fonts that support required character sets
• Consider CJK (Chinese, Japanese, Korean) typography needs
• Support Arabic and other script-specific requirements
• Implement proper line breaking for different languages

Regional Features

Address Formats

• Adapt address forms for regional formats
• Support international phone number formats
• Handle postal/ZIP code validation by country
• Implement country-specific form validation

Measurement Units

• Support metric and imperial units
• Display appropriate units based on locale
• Allow user preference override
• Convert values accurately

Calendars and Time

• Support different calendar systems (Gregorian, Hijri, etc.)
• Handle timezone display preferences
• Support different week start days (Sunday vs Monday)
• Display appropriate date formats

Testing and Quality Assurance

Localization Testing

• Test with native speakers for each locale
• Verify layout with actual translated content
• Test all date, number, and currency formats
• Verify RTL layouts function correctly

Automated Checks

• Implement missing translation detection
• Check for hardcoded strings in code
• Validate translation file format and completeness
• Monitor for translation quality issues

Pseudolocalization

• Use pseudolocalization during development
• Detect hardcoded strings early
• Verify UI handles text expansion
• Test character encoding support

Content Delivery

Language Detection

• Detect user language from browser/device settings
• Support URL-based locale switching (/en/, /es/, /fr/)
• Persist user language preference
• Implement graceful fallback mechanisms

Performance Optimization

• Lazy load translation files by namespace
• Cache translations appropriately
• Use CDN for static translation files
• Minimize initial translation bundle size

Integration Best Practices

State Management

• Store locale preference in user settings
• Sync preference across devices when logged in
• Handle locale changes without full page reload
• Update all components on locale switch

API Integration

• Pass locale in API requests
• Return localized content from backend when appropriate
• Handle server-side locale negotiation
• Support content negotiation headers