Création de pages HTML en arabe, hébreu et autres scripts de droite à gauche (tutoriel)

Pourquoi devriez-vous lire ceci?

L'affichage correct d'un texte bidirectionnel peut parfois sembler déroutant et frustrant, mais ce n'est pas forcément le cas. Si vous avez eu des difficultés avec cela ou si vous n'avez pas encore commencé, ce tutoriel devrait vous aider à adopter la meilleure approche pour baliser votre contenu, et vous expliquer suffisamment le fonctionnement de l'algorithme bidirectionnel pour mieux comprendre les causes profondes de la plupart de vos problèmes. Nous aborderons également certaines idées fausses courantes sur la façon de traiter le balisage du contenu bidirectionnel.

Les objectifs

En suivant ce tutoriel, vous devriez pouvoir:

Les écritures de droite à gauche sont utilisées par de nombreuses langues, dont l'arabe, l'hébreu, le pachto, le persan, le sindhi, le syriaque, le thaana, l'urdu, le yiddish, etc.

public visé: Les auteurs de contenu HTML/XHTML et CSS implémentent des pages dans des scripts de droite à gauche tels que l'arabe et l'hébreu, ou doivent gérer des scripts de droite à gauche intégrés. Cet article s'applique que vous créiez des documents dans un éditeur ou via un scripting.

Ce tutoriel rassemble et organise des pointeurs vers des articles qui, pris ensemble, vous aident à comprendre les aspects essentiels de la façon de travailler avec les langues dans les scripts de droite à gauche et le texte bidirectionnel lors de la création de HTML et CSS.

En bref

Ajoutez un attribut dir à la balise html pour définir la direction de base par défaut de votre page si elle est de droite à gauche. Utilisez l'attribut dir sur les éléments de bloc de la page uniquement là où vous devez changer la direction de la base.

Pour le texte en ligne, enveloppez fermement toutes les phrases en sens inverse dans un balisage qui définit leur direction de base.

Utilisez dir=auto pour définir automatiquement la direction de base des champs de formulaire, des pre éléments ou du texte insérés dans la page. Utilisez l'attribut dirname si vous avez besoin de transmettre des informations sur la direction de base de la saisie du formulaire au serveur.

Évitez d'utiliser CSS ou des codes de contrôle Unicode pour gérer la direction où vous pouvez utiliser des balises.

Utilisez l'ordre logique du texte bidirectionnel, plutôt que l'ordre visuel, et laissez l'algorithme bidirectionnel Unicode prendre le relais.

Définitions

Texte bidirectionnel
Dans les langues qui utilisent des scripts de droite à gauche, tout texte incorporé à partir d'un script de gauche à droite et tous les nombres progressent visuellement de gauche à droite dans le flux visuel de droite à gauche du texte. (Bien sûr, le texte anglais sur cette page pourrait aussi contenir du texte bidirectionnel s'il comprenait, disons, des exemples en arabe et en hébreu).
Le texte bidirectionnel est courant dans les écritures de droite à gauche comme l'arabe, l'hébreu, le syriaque et le thaïlandais. De nombreuses langues différentes sont écrites avec ces écritures, y compris l'arabe, l'hébreu, le pachto, le persan, le sindhi, le syriaque, le dhivehi, l'urdu, le yiddish, etc.
Bidi
Une forme courte pour 'bidirectionnel'.
RTL
Une forme courte pour 'de droite à gauche'.
LTR
Une forme courte pour 'de gauche à droite'.
Direction de la base
Pour que le texte s'affiche correctement lorsqu'une page HTML est affichée, nous devons établir le contexte directionnel de ce texte. Nous appelons ce contexte directionnel la 'direction de base'.
Il est fondamentalement important d'établir la direction de base appropriée pour le texte afin que l'algorithme bidirectionnel produise l'ordre attendu du texte lorsqu'il est affiché. La spécification correcte de la direction de la base établit également un alignement par défaut correct pour le texte.
En HTML, la direction de base est soit définie explicitement par l'élément parent le plus proche qui utilise l'attribut dir soit, en l'absence d'un tel attribut, la direction de base est héritée de la direction par défaut du document, qui est de gauche à droite (LTR).
Algorithme bidirectionnel Unicode
L'algorithme bidirectionnel Unicode (UBA), souvent appelé " algorithme bidi ", fait partie de la norme Unicode. Il décrit un algorithme utilisé pour déterminer la directionnalité d'un texte Unicode bidirectionnel et est largement supporté par les navigateurs web et autres applications. Pour plus de détails, voir l'annexe 9 de la norme Unicode.

Balisage pour la direction du texte

Dans cette section, nous couvrons les bases du balisage pour la direction du texte.

Unicode Bidirectional Algorithm basics fournit une introduction douce au fonctionnement de l'algorithme bidirectionnel, soulignant les concepts et la terminologie dont vous aurez besoin pour comprendre comment travailler avec du texte bidirectionnel.

Le balisage structurel et le texte de droite à gauche en HTML examine l'utilisation de base de l'attribut dir au niveau du document et pour le balisage structurel en HTML, par exemple les paragraphes, les tableaux et les formulaires. Il examine également les nouveaux développements de HTML5 pour traiter la direction dans les éléments de formulaire, les pre éléments et le texte inséré.

Le balisage en ligne et le texte bidirectionnel en HTML commencent par décrire les situations dans lesquelles l'algorithme bidirectionnel Unicode a besoin d'aide. L'algorithme bidirectionnel Unicode est la base du contrôle directionnel du texte dans tous les navigateurs, mais il a ses limites, et celles-ci doivent être satisfaites par des balises. L'article examine les problèmes et propose des solutions simples. C'est un peu plus compliqué que l'article précédent, parce que c'est là que vous devez traiter le texte bidirectionnel.

L'ordre visuel vs. logique du texte compare les approches visuelles vs. logiques du stockage de texte bidirectionnel et justifie l'utilisation du modèle logique. De nos jours, il est généralement peu probable que vous ayez à traiter avec du contenu ordonné visuellement.

CSS et caractères de contrôle Unicode

D'une manière générale, vous devriez gérer la direction du texte en HTML en utilisant des balises plutôt que CSS ou des caractères de contrôle Unicode, bien qu'il y ait des endroits où ce dernier soit le seul recours. Ces articles examinent en détail les raisons de cette situation.

CSS vs. balisage pour le support bidi

Contrôles Unicode vs. balisage pour le support bidi explique pourquoi le balisage est meilleur que les caractères de contrôle Unicode, où il est disponible.

L'utilisation des contrôles Unicode pour le texte bidi explique comment utiliser les caractères de contrôle Unicode là où ils sont la seule option.