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:

créer des pages HTML efficaces contenant du texte écrit en arabe, en hébreu ou dans d'autres écritures de droite à gauche.
comprendre les bases du fonctionnement de l'algorithme bidirectionnel Unicode, afin que vous puissiez comprendre pourquoi le texte bidirectionnel se comporte comme il le fait, et comment résoudre les problèmes.
appliquez les nouveaux ajouts importants en HTML5 à votre balisage bidi.
prendre des décisions quant à la pertinence des solutions de rechange à la majoration.

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.

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: 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: 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.