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:

crear páginas HTML efectivas que contengan texto escrito en árabe, hebreo u otro alfabeto de derecha a izquierda
Comprender los conceptos básicos de cómo funciona el algoritmo bidireccional Unicode, para que pueda entender por qué el texto bidireccional se comporta de la forma en que lo hace, y cómo trabajar en los problemas
aplicar las nuevas incorporaciones significativas en HTML5 a su marcado de bidi.
Tomar decisiones sobre la idoneidad de las alternativas al marcado

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

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: En los lenguajes que utilizan scripts de derecha a izquierda, cualquier texto incrustado de un script de izquierda a derecha y todos los números, progresan visualmente de izquierda a derecha dentro del flujo visual de derecha a izquierda del texto. (Por supuesto, el texto en inglés de esta página también podría contener texto bidireccional si incluye, por ejemplo, ejemplos en árabe y hebreo.); El texto bidireccional es común en guiones de derecha a izquierda como el árabe, el hebreo, el siríaco y el tailandés. Numerosos idiomas diferentes están escritos con estas escrituras, incluyendo árabe, hebreo, pashtún, persa, sindhi, siríaco, dhivehi, urdu, yiddish, etc.
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.