Categorías: Labs

Creando web apps y sitios web compatibles con RTL – parte 1

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por Carlos Chocobar.

Hacer la web más accesible para más personas, en más idiomas, es un esfuerzo que sigue en marcha y una meta que nos tomamos muy en serio en Mozilla.

Esta publicación es la primera de una serie de artículos que explican uno de los rincones más descuidados y menos conocidos en el desarrollo web: el desarrollo RTL (de derecha a izquierda). En un contexto de desarrollo web esto significa hacer tu contenido web compatible con idiomas RTL como árabe, hebreo, persa y urdu, todos escritos de derecha a izquierda.

Frecuentemente los desarrolladores descuidan esta área debido a la falta de recursos didácticos. En esta serie de artículos esperamos proveer suficiente información para permitir a los desarrolladores hacer un contenido que sea accesible para una amplia audiencia global utilizando las capacidades RTL que la mayoría de los navegadores web proveen actualmente.

¿Qué es RTL, realmente?

Para aclarar las cosas, hay una diferencia entre un idioma y su escritura. La escritura es el texto o la forma escrita – mientras que el idioma refiere a la forma hablada. Así técnicamente, de derecha a izquierda describe la escritura en del idioma, comparado con la escritura de izquierda a derecha, como el inglés o francés, más familiar para lectores occidentales.

Por ejemplo, “Marhaban”, que significa hola, es una palabra escrita en escritura inglesa, pero que tiene al árabe como su idioma, mientras que “مرحبا”, es tanto escritura e idioma árabe.

Como dijimos anteriormente, en la web el término RTL significa más que solo escritura. El mismo representa todas las facetas de desarrollo de aplicaciones web y sitios web que no se rompen o llegan a ser ilegibles cuando usan árabe, urdu, u otra escritura RTL.

Antes de continuar, vamos a aclarar algunos conceptos erróneos acerca de RTL.

Primero, RTL no se trata de traducir un texto al árabe: Significa algo más que solo traducir tu sitio web al árabe. En realidad es hacer que cada aspecto de la interfaz de usuario y el diseño sea amigable con RTL. Y como siempre digo – y no lo puedo remarcar lo suficiente – ¡haz RTL bien o no te molestes! Hacerlo a la mitad hará que pierdas audiencia y credibilidad.

Segundo, RTL es más que solo “dar vuelta a todas las cosas”: No estoy seguro si ya se arregló este asunto o no, pero configurar tu región al árabe en Gnome provocaba que la hora fuera PM 33:12 en vez de 12:33 PM.

Bueno, así no es cómo funciona. Soy un hablante nativo árabe pero esto no significa que leo la hora al revés. Hay algunas excepciones y cosas a las que hay que prestarle atención respecto a los números y las cubriremos en esta serie.

¿Por qué debería importarme el RTL?

¡Es posible que tengas la impresión que RTL es difícil, aterrador y que te dará una gran cantidad de trabajo a tu proyecto! En realidad no es tan difícil. Una vez que comprendes lo básico, el esfuerzo extra no es tan grande.

Debería importarte incorporar soporte de derecha a izquierda a tu aplicación web o sitio web por muchas, muchas razones. Desde el 2010, hay alrededor de 410 millones de hablantes nativos de RTL en todo el mundo (¡Eso es un montón de gente! Nota: El cálculo se basa en la lista de Wikipedia de todos los idiomas). También hay millones de potenciales usuarios y un potencial gran mercado para tu aplicación o sitio web. Ahora muchas empresas incorporan soporte RTL a su software (por ejemplo Windows, iOS, Android) y sitios webs, así hablantes nativos de RTL esperan que tu sitio web satisfaga sus expectativas respecto al soporte RTL. Sin este soporte puede que los que visiten tu aplicación web no vuelvan otra vez.

En Firefox OS sólo empezamos a enviar dispositivos hacia Medio Oriente cuando tuvimos soporte RTL completamente implementado en el sistema y así nuestro socio Orange podía vender aparatos con el OS en el mismo. Obviamente esto abre un nuevo mercado completo de usuarios para Firefox OS.

Mejores prácticas para RTL

Aquí hay algunas reglas generales a tener en cuenta en el desarrollo de sitios y aplicaciones web compatibles con RTL:

  • Piensa desde la derecha: En una región con escritura e idioma RTL, los libros se abren desde la derecha. Así, la mayoría de los elementos de la interfaz relacionados a la legibilidad van a estar invertidos.
  • La interfaz de hardware de legado es una realidad: En MENA (oriente medio y norte de África) y otras regiones donde se habla el idioma RTL, las personas también utilizan dispositivos electrónicos. El hardware de audio tiene el mismo diseño de control como en cualquier lugar del mundo. Así los botones Play, Fast Forward, Next y Previous han sido siempre los mismos. Y debido a eso, no es buena idea invertir ninguno de esos botones. No hagas RTL a los botones del reproductor multimedia. Otro ejemplo de hardware de legado es la característica del teclado físico del teléfono; antes de que aparezcan los Blackberries y teclados similares para equipos portátiles, existía el físico y simple pad numérico – hasta hace muy poco era ampliamente popular en países MENA. Por esta razón, se recomienda mucho *no* invertir las teclas numéricas. Un buen ejemplo de esto es Firefox OS. Como su objetivo inicial eran los países en desarrollo, nos aseguramos de no dejar que el marcador de teléfono se invierta en RTL.
  • Contactos Firefox OSPensar de derecha a izquierda no es pensar como zurdo: recuerda no confundir el desarrollo de interfaces RTL con las que son para zurdos. En las regiones RTL del mundo, las personas diestras son la mayoría, así como en el resto del mundo. Por eso no se reflejaría nada que no esté relacionado con la forma que el usuario lee el contenido real de la página. Por ejemplo, la barra de desplazamiento de la A-Z de Firefox OS en la aplicación Contactos se posiciona a la derecha debido a que es más fácil desplazarla con la mano derecha, así esto no debería de ir al otro lado cuando tu página está en el modo RTL.

Vayamos al punto: cómo hacer contenido RTL

El primer paso para hacer una página web RTL es agregar el código dir="rtl" a la etiqueta <html>:

<html dir="rtl"></html>

dir representa dirección y configurar su valor a rtl hace que por defecto el punto inicial horizontal de los elementos sea la derecha en vez de la izquierda.

Para apuntar a un elemento con CSS solo cuando la página sea RTL:

  1. Crea una copia de cualquier regla CSS regular que le apunte.
  2. Agrega el selector de atributo html[dir="rtl"] en frente de la cadena del selector.
  3. Luego, cuando encuentres una propiedad o valor que represente posicionamiento horizontal de algún tipo en la regla del RTL, usa su opuesto. Por ejemplo, si encuentras float: left deberías cambiarlo a float: right.

Por ejemplo, si la regla original es la siguiente:

.someClass {
    text-align: left;
    padding: 0 10px 0 0;
    text-decoration: underline;
}

Deberías de pegar una copia de la misma luego de la original y actualizarla de la siguiente manera:

html[dir="rtl"] .someClass {
    text-align: right;
    padding: 0 0 0 10px;
}

Nota que la declaración text-decoration: underline; ha sido removida. No necesitamos anularla en la versión RTL porque no afecta ninguno de los elementos de diseño basados en la dirección. Aún así se aplica el valor de la regla original.

Este es un ejemplo aún más detallado que puedes hackear directamente: Mira el Pen dYGKQZ por Ahmed Nefzaoui (@anefzaoui) en CodePen.

Por supuesto, los casos reales no son tan simples como este. Hay aplicaciones con un enorme número de reglas CSS y selectores, y hay múltiples estrategias que puedes adoptar. Esta es un enfoque recomendado:

  1. Copia y limpia: Primero, copia el contenido de tu hoja de estilo hacia otro archivo, agrega html[dir="rtl"] a todas las reglas, luego quita todas las propiedades que no se relacionen a la configuración horizontal. Deberías de terminar con un archivo más liviano que simplemente se ocupe de RTL.
  2. Invierte los estilos: Cambia todas las propiedades que queden en el nuevo archivo por sus opuestos: por ejemplo, padding-left se vuelve padding-right, float: right se vuelve float: left, etc. Nota: si tuviste originalmente padding-left y lo cambiaste por padding-padding-right, recuerda que el padding-left original todavía existe en la regla original. Debes agregar padding-left: unset junto a padding-right, sino el navegador computará ambas propiedades: el padding-left de la regla CSS original y el nuevo padding-right en la regla RTL. Lo mismo se aplica para cualquier propiedad que tiene múltiples variantes de direcciones como margin-left|right, border-left|right
  3. Vuelve a pegar: Luego de que hayas finalizado los pasos anteriores, vuelve a pegar las reglas creadas en el archivo original, después de los originales. Luego me gusta agregar un pequeño comentario como /* **** RTL Content **** */ para hacer más fácil la diferenciación entre las dos partes de tu archivo de estilos.

Una mejor manera: aislar completamente los estilos izquierda/derecha

Algunas veces te encontrarás frente a casos extremos que provocan conflicto con el código. Esto implica heredar valores desde otras propiedades, lo que significa que algunas veces no estarás seguro qué anular y qué no. Quizás haz agregado margin-right a la regla RTL pero no estás seguro: ¿qué configurar como el valor margin-left original? En todos los casos de la vida real se aconseja en adoptar otro enfoque, que en general es mejor pero más extenso. Para este enfoque aislamos completamente las propiedades basadas en dirección de las reglas tanto para los casos LTR y RTL. Este es un ejemplo: tenemos .wrapper .boxContainer .fancyBox listados de la siguiente manera:

.wrapper .boxContainer .fancyBox {
    text-align: left;
    padding-left: 10px;
    text-decoration: underline;
    color: #4A8CF7;
}

En vez de agregar otra propiedad para RTL con ambos padding-left y padding-rigth, puedes hacer lo siguiente:

.wrapper .boxContainer .fancyBox {
    text-decoration: underline;
    color: #4A8CF7;
}
 
html[dir="ltr"] .wrapper .boxContainer .fancyBox {
    text-align: left;
    padding-left: 10px;
}
 
html[dir="rtl"] .wrapper .boxContainer .fancyBox {
    text-align: right;
    padding-right: 10px;
}

Esta solución consta de 3 partes:

  1. La regla o el selector original solamente con propiedades no basadas en dirección, ya que están compartidas por el diseño LTR y el RTL.
  2. El caso de izquierda a derecha – html[dir="ltr"]solamente con las propiedades basadas en la dirección CSS incluidas, para que sus valores establecidos coincidan con tu diseño LTR.
  3. El caso de derecha a izquierda – html[dir="rtl"] – con las mismas propiedades que en el caso LRT, solamente con sus valores establecidos de acuerdo con lo que quieras hacer en tu diseño RTL.

Nota que en la segunda regla solo tenemos padding-left y en la tercera solo padding-right. Eso es porque cada una de ellas es exclusiva de la dirección que se les otorgó en el atributo dir. Este es un buen y limpio enfoque que no necesita de la desconfiguración de las propiedades. Este es el preciso enfoque que usamos cuando agregamos soporte RTL a Firefo OS. (Nota: No todos los navegadores soportan el valor unset. Para una mejor compatibilidad vas a necesitar que volver a declarar el valor deseado explícitamente  para cualquier propiedad que desees desconfigurar.)

¿Cómo podemos obtener y establecer la dirección de la página utilizando JavaScript?

Es bastante fácil, y solo necesita una línea de código: document.documentElement.dir. Puedes asignarle esta línea a una variable, y enviarla a la consola para verla tú mismo:

var direction = document.documentElement.dir; console.log(direction);

O puedes intentar lo siguiente: Mira el Pen WQxWQQ por Ahmed Nefzaoui (@anefzaoui) en CodePen.

Para configurar la dirección de la página, sólo utiliza lo siguiente: document.documentElement.dir = "rtl"

Y este es un ejemplo donde se obtiene y establece el valor de la dirección de la página web: Mira el Pen gaMyPN por Ahmed Nefzaoui (@anefzaoui) en CodePen.

Soluciones RTL automáticas

Basta de hablar de maneras manuales para hacer RTL. Ahora veamos algunos enfoques automatizados.

css-flip

Twitter ha desarrollado una solución para automatizar todo el proceso y hacerlo más fácil para mayores proyectos el implementar RTL. Ellos han liberado el código del mismo y lo puedes encontrar en Github.

Este plugin NPM cubre prácticamente todos los casos que puedes encontrar cuando trabajes en RTL, incluyendo casos extremos. Algunas de sus características son:

  • no-flip: Para indicar al motor de inversión que no deseas dar vuelta a alguna propiedad, solo agrega /* @noflip*/ al principio de la propiedad. Por ejemplo, si de esta manera escribes /* @noflip*/ float: left, la misma se quedará como float: left luego de que se corra css-flip.
  • @replace: Cuando tienes imágenes de fondo que se diferencian entre LTR y RTL, puedes especificar una imagen de reemplazo incluyendo /*@replace: url(my/image/path) antes de la propiedad original. Digamos que tienes background-image: url(arrow-left.png). Si actualizaste la línea a /*@replace: url(arrow-rightish.png) */ background-image: url(arrow-left.png); terminarás con background-image: url(arrow-rightish.png); en el diseño RTL.

Puedes usar css-flip en la línea de comandos ejecutando css-flip path/to/file.css > path/to/file.rtl.css o requiriendo css-flip en tu página. Encontrarás más sobre esto en su repositorio en github. css-flip que está siendo usado activamente en las propiedades de Twitter.

rtlcss

Otra opción para una conversión automática es la herramienta de Mohammad Younes llamada rtlcss – la misma está disponible también en github y provee algunas propiedades geniales. Con este motor puedes:

  • Renombrar los nombres de reglas (por ejemplo renombrar #boxLeft a #boxRightSide).
  • Ignorar completamente algunas reglas en el proceso de inversión.
  • Ignorar propiedades individuales.
  • Adjuntar/anteponer nuevos valores.
  • Insertar nuevos valores de propiedad entre otros.

El uso básico es mediante la línea de comandos – puedes crear tu RTL CSS equivalente ejecutando lo siguiente en el mismo directorio en el que está disponible tu CSS original: rtlcss input.css output.rtl.css

Por supuesto que solo puedes requerirlo en tu página. Más detalles en github.

Este proyecto es muy popular y está siendo usado para varios proyectos incluyendo WordPress.

Palabras finales

Aunque todavía queda mucho por cubrir, este artículo pretende proveer el conocimiento suficiente para empieces a explorar con confianza el RTL. En el próximo artículo cubriremos temas más avanzados de RTL.

The following two tabs change content below.

jorgev

Add-ons Developer Relations Lead at Mozilla
Jorge trabaja para el equipo de complementos de Mozilla, y se dedica a Mozilla Hispano y Mozilla Costa Rica en su tiempo libre. Actualmente está encargado del blog de Mozilla Hispano Labs.