Internacionalización

Arabe, hebreo y persa se escriben de derecha a izquierda. Implementar soporte RTL desde el principio es barato; retrofitearlo en un sistema existente puede triplicar el esfuerzo. En CSS moderno, usar propiedades logicas (margin-inline-start, padding-inline-end) en lugar de margin-left y padding-right para que el layout se espeje automáticamente.

En RTL, los iconos que representan dirección o flujo deben espejarse: flechas de navegación, iconos de reproductor, chevrons de breadcrumb. Los iconos universales nunca deben espejarse: checkmark, warning, logo, reloj, telefono, corazón. Aplicar [dir="rtl"] .icon-directional { transform: scaleX(-1); } solo a los iconos de flujo.

El ingles es uno de los idiomas más cortos. "Submit" en aleman es "Einreichen". "Delete account" en frances es "Supprimer le compte". Los textos en UI suelen expandirse 30-40% al traducir del ingles. Los layouts deben ser elasticos: evitar anchos fijos en botones y labels, usar min-width en lugar de width en CTAs.

Las concatenaciones de cadenas asumen un orden gramatical fijo que no funciona en todos los idiomas. En español "Hola " + nombre funciona, pero en japones el sujeto va al final y el verbo cambia de posición. Usar siempre interpolación con plantillas: t('greeting', { name, count }) permite que el traductor reordene las variables dentro de la cadena según la gramatica del idioma destino, sin tocar código.

En español hay dos formas plurales (1 archivo / 2 archivos). En arabe hay seis. En polaco hay cuatro. En ruso hay cuatro. Usar una libreria de i18n que soporte las reglas de pluralización del Unicode CLDR (como i18next o la API nativa Intl.PluralRules). Nunca concatenar manualmente con count + " archivo(s)", porque el resultado es incorrecto en la mayoría de idiomas con reglas plurales complejas.

12/03/2025 es el 12 de marzo en EE.UU. y el 3 de diciembre en gran parte del mundo. Lo mismo con números: 1,234.56 en EE.UU. es 1.234,56 en Alemania. Usar siempre Intl.DateTimeFormat, Intl.NumberFormat e Intl.RelativeTimeFormat para formatear según el locale del usuario. Nunca formatear fechas, números o monedas manualmente. Código: new Intl.DateTimeFormat(locale).

El texto embebido en imagenes no es traducible, no es accesible para lectores de pantalla, no escala bien en alta densidad, y dificulta el SEO. Todo texto que deba ser localizado debe ser HTML sobre la imagen (posicionado con CSS), nunca parte del archivo de imagen. Excepción: logos y marcas registradas.

El rojo significa peligro en Occidente pero suerte y prosperidad en China. El blanco es el color del luto en Japon y partes de Asia. El verde de "exito" no es universal. Cuando el color carga significado funcional (error, exito, advertencia), siempre acompañarlo con un icono o texto. El color solo nunca debe ser la única señal de significado cultural.

En español, "ch" y "ll" se ordenaban como letras independientes. En sueco, "a" con umlauts va después de "z". JavaScript Array.sort() por defecto usa orden Unicode, no lingüístico. Usar siempre Intl.Collator o el método localeCompare() con el locale correcto para listas de nombres, paises o cualquier texto ordenado alfabeticamente.

Las pruebas de i18n con Lorem Ipsum o texto en ingles no revelan los problemas reales. Usar traducciones reales desde el primer sprint, aunque sea con un solo idioma adicional. Los errores de layout, truncamiento, orden RTL y pluralización solo aparecen con texto real. Encontrar estos problemas en sprint 1 cuesta 10x menos que en producción.