Internacionalización (i18n) para aplicaciones web

Internacionalización: hacer que tu sitio web hable varios idiomas

La internacionalización (i18n) es la práctica de diseñar tu sitio web para que pueda adaptarse a diferentes idiomas y regiones. Un sitio web bien internacionalizado puede traducirse a nuevos idiomas sin reescribir el código, y maneja correctamente los formatos de fecha, monedas y la dirección del texto para cada configuración regional.

Separar el texto del código

El principio fundamental de la internacionalización es nunca codificar el texto de forma fija. En lugar de escribir 'Bienvenido' directamente en tu plantilla, usas una función como t('bienvenido') que busca la traducción para el idioma actual. Las traducciones se almacenan en archivos separados, uno por idioma, por lo que agregar un nuevo idioma solo significa agregar un nuevo archivo de traducción.

Los archivos de traducción suelen ser objetos JSON con claves para cada cadena. El archivo en inglés podría tener 'bienvenido': 'Welcome', y el archivo en italiano tendría 'bienvenido': 'Benvenuto'. Esta separación significa que los traductores pueden trabajar en los archivos de traducción sin tocar el código.

Manejo de plurales y variables

El simple reemplazo de texto no es suficiente. Diferentes idiomas tienen diferentes reglas de plural. El inglés tiene dos formas (uno, otro), pero el árabe tiene seis, y el japonés tiene esencialmente una. Una buena biblioteca i18n maneja esto automáticamente: especificas la traducción para cada forma plural, y la biblioteca elige la correcta según el número.

Las variables en las traducciones también se manejan de manera diferente según el idioma. En inglés, podrías decir 'Hello, {name}' — la variable aparece en una posición específica. En otros idiomas, el orden de las palabras puede ser diferente. Una buena biblioteca maneja esto permitiendo marcadores de posición con nombre y dejando que los traductores los reorganicen según sea necesario.

Fechas, números y monedas

Diferentes regiones formatean fechas, números y monedas de manera diferente. Los estadounidenses escriben 04/01/2024 (1 de abril), los europeos escriben 01/04/2024 y los japoneses escriben 2024/04/01. Los números usan separadores diferentes: 1,234.56 en EE. UU. frente a 1.234,56 en gran parte de Europa. Las monedas tienen diferentes símbolos y diferentes reglas de colocación.

La API Intl integrada en los navegadores modernos maneja todo esto. Intl.DateTimeFormat, Intl.NumberFormat e Intl.RelativeTimeFormat formatean fechas, números y tiempos relativos correctamente para la configuración regional del usuario. No necesitas una biblioteca para esto: el navegador lo maneja.

Dirección del texto y diseño

No todos los idiomas se leen de izquierda a derecha. El árabe, el hebreo, el persa y el urdu se escriben de derecha a izquierda. Tu diseño debe manejar esto: el texto debe fluir de derecha a izquierda y la interfaz de usuario debe reflejarse en consecuencia. CSS tiene propiedades lógicas (margin-inline-start, padding-inline-end) que se adaptan automáticamente a la dirección del texto, por lo que no necesitas hojas de estilo separadas para izquierda a derecha y derecha a izquierda.

Bibliotecas i18n populares

Para proyectos JavaScript, la biblioteca más popular es i18next. Es independiente del framework pero tiene integraciones para React, Vue y otros frameworks. Maneja pluralización, interpolación, formato y más. Para React específicamente, react-intl y react-i18next son opciones populares. La clave es elegir una biblioteca e integrarla temprano: adaptar i18n a una aplicación existente es mucho más difícil que construirla desde el principio.