Sistemas de escritura: parte 1
En este post introduciremos conceptos de Sistemas de escritura para tenerlos en cuenta al realizar páginas web en un marco de i18n.
En este post introduciremos conceptos de sistemas de escritura para tenerlos en cuenta al realizar páginas web. En el siguiente post veremos cuáles herramientas nos provee CSS para aplicarlas. Es decir, aquí veremos un poco qué objetivos necesitamos cubrir y luego encararemos el cómo.
Empecemos por pensar en qué tienen en común los siguientes idiomas:
Están escritos en horizontal y se leen de izquierda a derecha. Si pudimos pensar en similitudes es porque hay idiomas que no comparten dichas características, ¿cierto? Hay 4 categorizaciones principales de Sistemas de escritura: Latino, Árabe, CJK y Mongol.
Enfoquémonos en el texto que está de ejemplo (Lorem Ipsum… ). A medida que vamos agregando caracteres, nos vamos moviendo hacia la derecha. Este es el primer concepto importante: la dirección en que va fluyendo el contenido se llama inline direction.
The inline base direction is the primary direction in which content is ordered on a line and defines on which sides the “start” and “end” of a line are.
La inline base direction es la dirección primaria en la que se ordena el contenido dentro de una línea y define en qué lados de la línea están el “inicio” y el “final” de la misma.
Vamos agregando carácter por carácter y, de pronto, no tenemos más lugar. Necesitamos hacer un salto de línea
Al hacer el salto de línea tengo que tomar una decisión. El siguiente carácter, la siguiente oración, ¿a donde la coloco? ¿En la línea de arriba?:
No, se ve raro. Al idioma castellano lo leemos de arriba para abajo. No de abajo para arriba. Entonces, el salto de línea me indica que tengo que tomar la decisión de posicionar al siguiente carácter en alguna parte. En este caso que el sistema de escritura es Latino, lo hacemos en la línea de abajo:
Por otra parte, a la dirección en la que se van apilando los bloques de contenido la vamos a llamar block direction.
The block flow direction is the direction in which block-level boxes stack and the direction in which line boxes stack within a block container.
The block flow direction es la dirección en la que se apilan bloques y también es la dirección en la que se apilan bloques que ya están dentro de un contenedor de bloque padre.
Veamos un ejemplo en el que el objetivo sea jugar con dos párrafos. Un párrafo con las letras en color rosa y otro en negro. Como son párrafos, vamos a querer que estén encuadrados en bloques separados:
Al agregar el párrafo negro, se tuvo en cuenta que el objetivo era crear un bloque nuevo.
En resumen, a un sistema de escritura lo podemos describir por tres elementos: la inline direction, la block direction y también por la dirección en la que está orientado cada elemento:
Veamos cómo funcionan estos tres elementos en los demás sistemas de escritura
La notoria diferencia con el Latino es que el sentido de la inline direction va de izquierda a derecha. Ya que el idioma árabe se lee de derecha a izquierda. La block direction sigue siendo igual.
El siguiente ejemplo está en idioma chino. Lo leemos: de arriba hacia abajo, de derecha a izquierda
En este sistema podemos notar que las direcciones inline y block no siempre toman los mismos ejes. Es decir, pensándolo en un esquema de 2 dimensiones, no podemos asumir que el eje horizontal va a ser siempre la inline direction y que el eje vertical va a ser siempre la block direction. Acá las vemos justamente intercambiadas:
Por último, les presento al más divertido de todos: el mongol!
Se lee diferente a lo que acostumbramos: de arriba a abajo, de izquierda a derecha. La inline direction es vertical, la block es horizontal. Parecido al chino, pero cada bloque se va apilando en el sentido opuesto: de izquierda a derecha. Y, por si no lo notaste, los caracteres tienen una orientación particular!
Algo importante es que si bien en todos los ejemplos me enfoqué en el texto como contenido, a la hora de pensar nuestros layouts web y adaptarlos a cualquier sistema de escritura, tenemos que saber que no solo nos enfocaremos en texto y su traducción a otros lenguajes. El contenido de un layout es más que eso. Para hacerlo más visual, tomemos como ejemplo el sitio web de Amazon. Si elegís verla en el idioma árabe no solamente se traduce el texto al árabe. Si no que la diagramación en que fue hecho el layout de la página también respeta la configuración del árabe en su inline direction de derecha a izquierda.
Acá el sitio en castellano:
Acá en árabe:
Es notorio cómo la sección de las imágenes del producto ahora está hacia la derecha, denotando que aquí nuestros ojos van a mirar esta web barriendola de derecha a izquierda. Y queremos que esos ojos vean primero lo mismo que querríamos si el sitio estuviese en castellano.
En este posteo introducimos algunos conceptos, en consiguientes posteos veremos cómo CSS nos provee herramientas para aplicarlos a nuestros sitios Web.
Información extra
En este posteo me enfoqué en los cuatro Sistemas de Escritura que el CSSWG menciona en su documentación. ¿Qué es el CSSWG? Creado por la World Wide Web Consortium (W3C) en 1997, es un conjunto de personas que se dedican a desarrollar y mantener la especificación de CSS. Algo que me pareció super curioso es que incluso comparten documentación en estado borrador de aquello que están iterando, pero que aún no consideran terminado, pueden chusmearlo acá: https://drafts.csswg.org/
Quiero terminar este post agradeciéndole a Josh Comeau, Estefany Aguilar, Jen Simons y Rose Akoth por crearme una motivación inesperada en este año. Estaba realizando el curso CSS for JS developers de Josh y quise indagar más. Así es como aprendí un poco de algunos sistemas de escritura y terminé viendo charlas de personas increíbles. En esta seguidilla de posteos intento resumir lo que aprendí y que creo útil compartir. No puedo dejar de recomendarles que busquen material de elles si, como yo, quieren profundizar más.