Creación de páginas HTML en árabe, hebreo y otros scripts de derecha a izquierda (tutorial)

¿Por qué debería leer esto?

Conseguir que el texto bidireccional se muestre correctamente a veces puede parecer desconcertante y frustrante, pero no tiene por qué ser así. Si ha tenido problemas con esto o aún no ha empezado, este tutorial le ayudará a adoptar el mejor enfoque para marcar su contenido, y le explicará cómo funciona el algoritmo bidireccional para que pueda entender mucho mejor las causas de la mayoría de sus problemas. También abordaremos algunos conceptos erróneos comunes acerca de las cómo tratar el marcado de contenido bidireccional.

Objectivos

Siguiendo este tutorial debería ser capaz de:

Las escrituras de derecha a izquierda son utilizadas por numerosos idiomas, incluyendo árabe, hebreo, pashto, persa, sindhi, sirio, tailandés, urdu, yiddish, etc.

Público al que va dirigido: Autores de contenido HTML y CSS que implementan páginas en scripts de derecha a izquierda como el árabe y el hebreo, o tienen que lidiar con texto de escritura incrustado de derecha a izquierda.

Este tutorial reúne y organiza consejos para artículos que, en conjunto, le ayudan a entender los aspectos esenciales de cómo trabajar con lenguajes en scripts de derecha a izquierda y texto bidireccional cuando se crea HTML y CSS.

En resumen

Añada un atributo dir a la etiqueta html para establecer la dirección base predeterminada de su página si es de derecha a izquierda. Utilice el atributo dir en los elementos de bloque dentro de la página sólo cuando necesite cambiar la dirección de la base.

Para texto en línea, ajuste bien todas las frases de dirección opuesta con marcas de revisión que establezcan su dirección base.

Utilice dir=auto para establecer automáticamente la dirección base de los campos de formulario, pre elementos o texto insertado en la página. Utilice el atributo dirname si necesita pasar información sobre la dirección base de la entrada del formulario al servidor.

Evite utilizar CSS o códigos de control Unicode para gestionar la dirección en la que puede utilizar marcas de revisión.

Utilice el orden lógico del texto bidireccional, en lugar del orden visual, y deje que el Algoritmo Unicode Bidireccional se encargue de ello.

Definiciones

Texto bidireccional
Text that mixes runs of both LTR and RTL text inline. It is common for right-to-left scripts, such as Arabic and Hebrew, to contain short runs of left-to-right text (most commonly in the Latin script), and several of the scripts that are predominantly right-to-left display numbers from left-to-right. Bidirectional text is the source of many of the difficulties when dealing with RTL scripts.
Bidi
Un término abreviado de 'bidireccional'.
RTL
Un término abreviado de 'derecha a izquierda'.
LTR
Un término abreviado de 'izquierda a derecha'.
Dirección base
Para que el texto se vea bien cuando se muestra una página HTML, necesitamos establecer el contexto direccional de ese texto. Nos referimos a ese contexto direccional como la "dirección base".
IEs fundamentalmente importante establecer la dirección base apropiada para el texto de modo que el algoritmo bidireccional produzca el orden esperado del texto cuando se muestre. La especificación correcta de la dirección base también establece una alineación por defecto adecuada para el texto.
En HTML, la dirección base se establece explícitamente por el elemento principal más cercano que utiliza el atributo dir o, en ausencia de dicho atributo, la dirección base se hereda de la dirección predeterminada del documento, que es de izquierda a derecha (LTR).
Algoritmo Unicode Bidireccional
El Algoritmo Unicode Bidireccional (UBA), al que a menudo se hace referencia como el "algoritmo bidi", forma parte del estándar Unicode. Describe un algoritmo utilizado para determinar la direccionalidad del texto Unicode bidireccional y es ampliamente soportado por los navegadores web y otras aplicaciones. Para más detalles, ver Unicode Standard Anexo #9.

Marcado para la dirección del texto

En esta sección cubrimos los aspectos básicos del marcado de la dirección del texto.

Conceptos básicos de los algoritmos bidireccionales Unicode proporciona una introducción básica sobre cómo funciona el algoritmo bidi, resaltando conceptos y terminología que necesitará para entender cómo trabajar con texto bidireccional.

El marcado estructural y el texto de derecha a izquierda en HTML habla sobre el uso básico del atributo dir a nivel de documento y el marcado estructural en HTML, por ejemplo, cosas como párrafos, tablas y formularios. También examina los nuevos desarrollos en HTML5 para tratar la dirección en los elementos del formulario, los pre elementos y el texto insertado.

El marcado en línea y el texto bidireccional en HTML comienzan por describir situaciones en las que el Algoritmo Unicode Bidireccional necesita ayuda para el marcado. El Algoritmo Unicode Bidireccional es la base para el control direccional del texto en todos los navegadores, pero tiene sus necesidades, y estas deben estar cubiertas con el marcado. El artículo examina los problemas y propone soluciones sencillas. Esto es algo más complicado que el artículo anterior, porque es donde hay que manejar el texto bidireccional.

El orden visual vs. lógico del texto compara los enfoques visuales vs. lógicos para almacenar texto bidireccional y plantea el caso para el modelo lógico. Hoy en día, es poco probable que tenga que lidiar con contenido ordenado visualmente.

CSS y caracteres de control Unicode

En términos generales, debería gestionar la dirección del texto en HTML utilizando marcado en lugar de CSS o de caracteres de control Unicode, aunque hay lugares en los que este último es el único recurso. En estos artículos se examinan en detalle las razones.

CSS vs. marcado para el soporte de bidi

Controles Unicode vs. marcado para soporte de bidi discute por qué el marcado es mejor que el de caracteres de control Unicode, donde está disponible.

El uso de controles Unicode para texto bidi explica cómo usar caracteres de control Unicode donde éstos son la única opción.