🌐 ESTÁNDAR AVANZADO DE INTERNACIONALIZACIÓN (I18N) Y L10N

🎯 OBJETIVO

Garantizar la adaptación cultural y lingüística de la aplicación para mercados globales, soportando idiomas RTL (derecha a izquierda), reglas de pluralización dinámicas y formateo de fechas y divisas seguras.

🎯 REGLAS INQUEBRANTABLES

[REQUIRED] I18N-001: NUNCA hardcodear cadenas de texto en componentes UI. Todos los textos expuestos al usuario deben provenir de claves de traducción.

Por qué: un texto hardcodeado en un componente es invisible para el flujo de traducción: nadie lo encuentra para traducirlo hasta que un usuario en otro idioma lo reporta como un texto que quedó en el idioma original en medio de la interfaz traducida.

[REQUIRED] I18N-002: Formateo de fechas, números y monedas estricto con Intl API. Queda prohibido concatenar cadenas para construir fechas o formatear valores monetarios manualmente.

Por qué: concatenar cadenas para construir una fecha o un número asume un orden y un formato (día/mes/año, coma o punto decimal) que varía por región; el resultado es correcto solo por casualidad, para el idioma en el que se escribió el código. La API Intl conoce las reglas de cada configuración regional y no hay que mantenerlas a mano.

[RECOMMENDED] I18N-003: Carga Diferida (Lazy Loading) de archivos de traducción. Solo descargar el archivo JSON del idioma activo para evitar inflar el bundle inicial.

Por qué: cargar las traducciones de todos los idiomas soportados en el bundle inicial infla la carga con contenido que el 100% de los usuarios, salvo los que hablan ese idioma, nunca va a usar. Es recomendado porque en aplicaciones con dos o tres idiomas el ahorro no compensa la complejidad de cargar bajo demanda.

🌍 1. SOPORTE RTL (RIGHT-TO-LEFT) Y PLURALIZACIÓN

Configuración del Documento y Dirección CSS

typescript

// Cambia automáticamente la dirección del layout (dir="rtl") según el idioma seleccionado
export function setAppLanguage(lang: string) {
  const isRtl = ['ar', 'he', 'fa'].includes(lang)
  document.documentElement.lang = lang
  document.documentElement.dir = isRtl ? 'rtl' : 'ltr'
}

Formateo Nativo con Intl API

typescript

// Formatear Monedas
export function formatCurrency(amount: number, locale: string, currency: string) {
  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(amount)
}

// Formatear Fechas Relativas (ej. "hace 5 minutos")
export function formatRelativeTime(value: number, unit: Intl.RelativeTimeFormatUnit, locale: string) {
  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
  return rtf.format(value, unit)
}

📋 CHECKLIST DE I18N AVANZADO

[ ] Cero cadenas de texto plano hardcodeadas en JSX.
[ ] Cambio de atributo dir="rtl" para idiomas de derecha a izquierda.
[ ] Uso exclusivo de Intl.NumberFormat e Intl.DateTimeFormat.
[ ] Carga dinámica de archivos JSON de traducción por demanda.
[ ] Tags hreflang configurados en las cabeceras HTML para SEO.

🌐 ESTÁNDAR AVANZADO DE INTERNACIONALIZACIÓN (I18N) Y L10N ​

🎯 OBJETIVO ​

🎯 REGLAS INQUEBRANTABLES ​

🌍 1. SOPORTE RTL (RIGHT-TO-LEFT) Y PLURALIZACIÓN ​

Configuración del Documento y Dirección CSS ​

Formateo Nativo con Intl API ​

📋 CHECKLIST DE I18N AVANZADO ​