Internationalization (i18n)

Implement multi-language support with proper translation management and formatting.

i18next Setup (React)

import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import LanguageDetector from 'i18next-browser-languagedetector';

i18n .use(LanguageDetector) .use(initReactI18next) .init({ fallbackLng: 'en', interpolation: { escapeValue: false }, resources: { en: { translation: { welcome: 'Welcome, {{name}}!' } }, es: { translation: { welcome: '¡Bienvenido, {{name}}!' } } } });

// Usage const { t } = useTranslation(); <h1>{t('welcome', { name: 'John' })}</h1>

Pluralization

// Translation file { "items": "{{count}} item", "items_plural": "{{count}} items", "items_zero": "No items" }

// Usage t('items', { count: 0 }) // "No items" t('items', { count: 1 }) // "1 item" t('items', { count: 5 }) // "5 items"

Date/Number Formatting

// Dates new Intl.DateTimeFormat('de-DE', { dateStyle: 'long', timeStyle: 'short' }).format(new Date());

// Numbers new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(1234.56); // "$1,234.56"

// Relative time new Intl.RelativeTimeFormat('en', { numeric: 'auto' }) .format(-1, 'day'); // "yesterday"

RTL Support

/* Use logical properties / .container { margin-inline-start: 1rem; / margin-left in LTR, margin-right in RTL */ padding-inline-end: 1rem; }

/* Direction attribute */ html[dir="rtl"] .icon { transform: scaleX(-1); }

Additional Frameworks

See references/frameworks.md for:

• React-Intl (Format.js) complete implementation

• Python gettext with Flask/Babel

• RTL language support patterns

• ICU Message Format examples

Best Practices

• Extract all user-facing strings

• Use ICU message format for complex translations

• Test with pseudo-localization

• Support RTL from the start

• Never concatenate translated strings

• Use professional translators for production