Internacionalización más fácil (Parte 1 de 3)

2024-07-06

Una parte muy importante al hacer un sitio o app accesible es soportar múltiples lenguajes. Hay muchas herramientas para manejar internacionalización (o i18n - una "i" seguida de 18 letras seguido de una "n"): Rails tiene el módulo I18n, Phoenix usa gettext, en Heroic usamos el paquete i18next y el módulo Intl, y otros frameworks proveen más soluciones.

Pero esta serie de artículos no se va a enfocar en esas herramientas... Todas estas herramientas proveen métodos y funciones para traducir y localizar text, pero hay mucho más que traducir palabras cuando se trabaja con múltiples lenguajes

Durante esta serie, voy a usar ejemplo del código de Heroic pero casi todas las ideas se pueden usar en cualquier otra aplicación.

Dirección del Texto

No todos los lenguajes se escriben de izquierda a derecha, hay otros lenguajes como Hebreo, Árabe, o Persa, que se escriben en la dirección opuesta. También hay otros lenguajes como Chino Tradicional, Japonés Tradicional, o Koreano, que se escriben verticalmente!

Pero esperá! hay más! Algunos escritos antiguos usaban el estilo Bustrofedon: alternaba cada línea empezando de izquierda a derecha, la siguiente línea de derecha a izquierda (incluso las letras estaban espejadas), luego otra vez de izquierda a derecha, y así hasta el final.

Pero no te preocupes! Las chances de que un Etrusco use tu aplicación es probablemente cero.

La Propiedad direction de CSS

El valor inicial de esta propiedad es ltr (de "left to right"), por eso normalmente no pensamos en esto programando un sitio en español o inglés, pero también suporta el valor rtl (de "right to left") que impactan en cómo el navegador renderiza algunos elementos.

by Ariel Juod (@arieljuod) on CodePen.

See the Pen LTR vs RTL direction

La lista podría seguir y seguir, pero lo importante es saber que la mayoría de los elementos HTML ya soportan renderizar el contenido con la dirección correcta cuando direction está definido, y que en muchos casos es mejor usar flex en lugar de block si sabemos que el contenido se va a traducir.

Lo que me gusta hacer a mí es:

  1. Si el lenguaje usado es RTL, agrego una clase isRTL al elemento body (o cualquier elemento raíz como #root en React)
  2. Agrego este CSS: 
    body.isRTL {
  direction: rtl;
}

Y listo! Mucho de nuestro contenido va a ser más user-friendly (aunque aún lejos de ser perfecto).

Esto también nos da un selector CSS claro para personalizar elementos que no cambian automáticamente.

Estos son unos ejemplos de código de Heroic:

El Atributo dir de HTML

El atributo dir es similar a la propiedad direction de CSS cuando se usan los valores ltr o rtl (aunque no es exactamente igual, hay más detalles en el link a la documentación de MDN sobre esto).

Pero hay un tercer valor posible: auto. Este valor le dice al navegador que infiera la dirección basado en el contenido del elemento! Entonces, si el contenido tiene (por ejemplo) un carácter en Árabe, el navegador va a considerar que el elemento se tiene que renderizar de derecha a izquierda.

Y los Lenguajes que se Escriben en Vertical?

No tengo experiencia manejando estos casos, pero sabés qué? CSS también puede hacer eso! Hay otra propiedad CSS llamada writing-mode que puede manejar las diferentes combinaciones.

Cuando se usan estos lenguajes, el layout de la página cambia mucho más que mover los elementos de la izquierda a la derecha. En estos casos seguramente se necesiten más cambios que sólo cambiar algo de CSS.

Si realmente necesitás soportar estos lenguajes, recomiendo este artículo que explica muchos de los desafíos.

Qué sigue?

Para lenguajes RTL, la expectativa no es sólo que el texto se escriba de derecha a izquierda, el layout también se tiene que espejar! Por ejemplo: Heroic tiene una barra lateral en el lado izquierdo, pero, cuando se usa un lenguaje RTL, esta se renderiza en el lado derecho de interface.

En el próximo artículo voy a hablar un poco sobre cómo manejar los cambios del layout y cómo usar las propiedades lógicas de CSS.