Pour du texte HTML imbriqué, choisissez l’isolation lorsque chaque expression doit conserver sa propre direction sans perturber les expressions voisines. Utilisez l’incorporation uniquement lorsque l’interaction avec le texte environnant est intentionnelle, et une substitution lorsque la conception exige explicitement un ordre des caractères imposé.

Ce guide aide à choisir le mécanisme adapté lors de la modification d’une page HTML sur Mac, à préserver les libellés imbriqués et la ponctuation, et à vérifier le résultat dans un navigateur de bureau. Les exemples utilisent des libellés, des nombres et des caractères géométriques inventés.

Quel mécanisme convient à la mise en page ?

Commencez par deux questions : le navigateur doit-il appliquer l’ordre bidirectionnel ordinaire à l’intérieur de l’expression, et cette expression doit-elle influencer l’ordre du texte environnant ? Ces choix donnent lieu à la comparaison pratique suivante. La référence de unicode-bidi sur MDN décrit les comportements CSS sous-jacents.

Exigence Mécanisme Approche HTML à privilégier
Délimiter une expression dont la direction est connue Isolation Un élément en ligne existant avec dir="ltr" ou dir="rtl"
Isoler une expression dont la direction est inconnue Isolation avec direction automatique bdi, ou un élément en ligne existant avec dir="auto"
Créer un contexte directionnel qui influe encore sur l’ordre environnant Incorporation Un cas CSS spécialisé utilisant unicode-bidi: embed
Imposer l’ordre des caractères tout en isolant le résultat Substitution isolée bdo avec dir="ltr" ou dir="rtl" explicite
Imposer l’ordre des caractères tout en conservant l’interaction avec le texte environnant Substitution non isolée Un cas CSS spécialisé utilisant unicode-bidi: bidi-override

Pour la rédaction HTML ordinaire, commencez par le balisage directionnel. Le W3C recommande d’entourer étroitement chaque expression de direction opposée et d’exprimer les expressions imbriquées au moyen de balises imbriquées. Les limites voulues sont ainsi visibles dans le document. W3C : Balisage en ligne et texte bidirectionnel en HTML.

Comment baliser du texte isolé imbriqué ?

Attribuez à chaque expression complète sa propre limite directionnelle. Si un élément en ligne existant contient déjà exactement cette expression, ajoutez-y dir. Sinon, introduisez un span. Gardez dans son conteneur la ponctuation qui appartient à l’expression ; laissez à l’extérieur la ponctuation de la phrase environnante. Le W3C appelle cela « entourer étroitement » l’expression. Conseils du W3C sur le balisage en ligne.

Pour un libellé de forme synthétique destiné à se lire de droite à gauche et contenant un identifiant de gauche à droite, la structure pourrait être le fragment illustratif suivant :

<p dir="ltr">
  Tile <span dir="rtl">● <span dir="ltr">A1 + B2</span> ■</span>: 12 items.
</p>

Trois contextes sont définis intentionnellement : la phrase externe, la séquence de formes et l’identifiant imbriqué. Le décompte appartient à la phrase ; il reste donc à l’extérieur de la séquence de formes. Si seule l’expression externe est balisée, l’identifiant interne n’a pas sa propre limite explicite. Cette imbrication suit la structure recommandée par le W3C pour les changements de direction. Conseils du W3C sur les expressions imbriquées.

Lorsque la direction du libellé inséré est inconnue, bdi fournit l’isolation et détecte automatiquement la direction par défaut. Un span simple, sans dir, ne fournit pas la même valeur par défaut. WHATWG précise que bdi prend par défaut la valeur auto au lieu d’hériter de la direction de la manière habituelle. Norme HTML : l’élément bdi.

La détection automatique de la direction est une heuristique fondée sur le premier caractère à direction forte, avec des exclusions spécifiées pour les éléments directionnels imbriqués. Elle ne comprend pas le sens voulu d’un libellé. Un libellé commençant par A1 fournit donc un indice de gauche à droite, même si son contenu ultérieur suggère une présentation différente. Utilisez une direction explicite lorsque vous connaissez déjà l’exigence. MDN : attribut global dir.

Un libellé composé uniquement de formes et de chiffres demande une attention particulière : il ne contient aucune lettre à direction forte. Dans les exemples en ligne ordinaires présentés ici, l’algorithme HTML utilise gauche à droite par défaut si la détection automatique ne trouve aucun caractère admissible. Indiquez dir="rtl" si cette séquence synthétique doit avoir une base de droite à gauche. Norme HTML : l’attribut dir.

Quand l’incorporation et les substitutions sont-elles appropriées ?

L’incorporation crée un niveau directionnel supplémentaire tout en conservant l’ordre ordinaire des caractères à l’intérieur de celui-ci. Sa limite a également un effet directionnel sur le texte environnant. L’isolation donne au contenu son propre contexte tout en faisant en sorte que la séquence se comporte de manière neutre vis-à-vis de ce qui l’entoure. La spécification du W3C distingue explicitement ces effets internes et externes. Modes d’écriture CSS niveau 3 : incorporations et substitutions.

Choisissez l’incorporation uniquement lorsque cette influence directionnelle externe fait partie du résultat voulu. Pour un libellé imbriqué indépendant suivi d’un décompte distinct, l’isolation est généralement le choix approprié. Un niveau d’imbrication supplémentaire ne justifie pas à lui seul le choix de embed : des éléments isolés peuvent eux-mêmes contenir d’autres éléments directionnels.

Une substitution modifie la règle interne. Elle impose à la séquence immédiate du texte l’ordre spécifié, au lieu de laisser l’algorithme ordinaire résoudre ses segments directionnels. isolate-override ajoute une limite d’isolation autour de cet ordre imposé. Il s’agit de comportements distincts, et non de réglages plus puissants pour corriger une expression ordinaire. MDN : valeurs de unicode-bidi.

Pour une démonstration délibérée de l’ordre des caractères, utilisez bdo avec dir="ltr" ou dir="rtl". La norme HTML exige une direction explicite et interdit auto sur cet élément. Ses règles de rendu utilisent unicode-bidi: isolate-override ; le comportement HTML actuel de bdo inclut donc l’isolation. Norme HTML : l’élément bdo, Norme HTML : rendu du texte bidirectionnel.

Cette distinction est importante pour les libellés latins : une base de droite à gauche ne signifie pas « inverser chaque caractère latin ». Une substitution peut imposer cette séquence. Même dans ce cas, l’orientation des glyphes individuels est conservée ; bdo ne dessine pas les formes des lettres à l’envers. MDN : élément bdo.

Essayez une page de comparaison complète sur votre Mac

La page autonome suivante ne nécessite qu’un navigateur et un éditeur de texte brut. Ses deux premières lignes comparent le traitement directionnel ordinaire à l’ordre imposé. Les autres lignes montrent les choix d’imbrication et de limites. La ligne d’incorporation CSS sert à illustrer le mécanisme ; pour un libellé indépendant ordinaire, commencez par la ligne d’isolation HTML.

Dans TextEdit, choisissez Fichier > Nouveau, puis Format > Convertir au format Texte. Collez le code complet ci-dessous. Choisissez Fichier > Enregistrer, nommez le fichier bidi-demo.html et sélectionnez Utiliser .html si l’invite apparaît. Apple documente ces étapes pour créer un fichier HTML. Ouvrez le fichier enregistré dans votre navigateur de bureau. Apple : Utiliser des documents HTML dans TextEdit sur Mac.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bidi boundary comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 44rem;
      margin: 2rem auto;
      padding: 0 1rem;
      line-height: 1.7;
    }
    .sample {
      border: 1px solid #777;
      padding: 0.75rem;
    }
    .scope {
      background: #eeeeee;
      outline: 1px dotted #555;
    }
    .embedding {
      direction: rtl;
      unicode-bidi: embed;
    }
  </style>
</head>
<body>
  <h1>Bidi boundary comparison</h1>

  <h2>Ordinary right-to-left base</h2>
  <p class="sample">Before <span class="scope" dir="rtl">ABC</span> after.</p>

  <h2>Forced right-to-left sequence</h2>
  <p class="sample">Before <bdo class="scope" dir="rtl">ABC</bdo> after.</p>

  <h2>Nested isolation</h2>
  <p class="sample">Tile <span class="scope" dir="rtl">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Embedding comparison</h2>
  <p class="sample">Tile <span class="scope embedding">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Automatic isolated direction</h2>
  <p class="sample">Tile <bdi class="scope">A1 (12)</bdi>: 12 items.</p>
</body>
</html>

Examinez les deux premières lignes avant d’apporter des modifications. La portée directionnelle ordinaire doit conserver ABC dans l’ordre des lettres de gauche à droite. La substitution doit afficher CBA lorsqu’on la lit depuis le bord gauche. Il s’agit d’une attente déduite des mécanismes documentés, et non d’une mesure rapportée pour un navigateur. MDN : comportement de bdo.

Comparez ensuite les lignes d’isolation imbriquée et d’incorporation. Gardez les mots et le décompte inchangés tout en examinant la séquence de formes et la ponctuation à sa limite. Le mécanisme diffère même si un exemple particulier semble identique : l’isolation et l’incorporation ne produisent pas nécessairement des résultats visiblement différents pour chaque chaîne. La distinction documentée porte sur la participation du contexte à la résolution bidi environnante. W3C : Modes d’écriture CSS niveau 3.

Pour effectuer un test utile des limites, déplacez les deux-points à l’intérieur de la portée directionnelle externe, enregistrez et rechargez. Remettez-les ensuite à l’extérieur. Vous modifiez ainsi l’expression à laquelle appartient la ponctuation ; évaluez donc le résultat en fonction de cette appartenance voulue. Enfin, rétrécissez la fenêtre du navigateur pour vérifier les mêmes limites lorsque la phrase passe à la ligne.

L’arrière-plan et le contour pointillé signalent la portée testée. Ils servent à l’inspection. Ils ne définissent ni la direction ni l’isolation.

Comment diagnostiquer un résultat qui semble toujours incorrect ?

Procédez de la plus petite expression concernée vers l’extérieur. Modifier plusieurs propriétés directionnelles à la fois rend difficile l’identification de la limite à l’origine du résultat.

  1. Vérifiez le conteneur. Contient-il le libellé entier, et uniquement ce libellé ? La ponctuation et les décomptes de la phrase doivent rester à l’extérieur, sauf s’ils font partie du libellé.
  2. Vérifiez les expressions imbriquées. Un identifiant dont la direction est indépendante, à l’intérieur d’une autre expression, peut nécessiter son propre conteneur dir.
  3. Vérifiez la direction automatique. Si la direction de base voulue est connue, remplacez auto par cette direction explicite. C’est particulièrement utile pour les formes synthétiques et les chiffres.
  4. Vérifiez la présence de substitutions. Si l’ordre des caractères est imposé de façon inattendue, examinez les déclarations bdo et CSS unicode-bidi.
  5. Vérifiez la cascade CSS. Une règle de l’auteur peut remplacer le style directionnel du navigateur. Supprimez les règles bidi expérimentales et retestez le balisage HTML.

Les deux premiers contrôles suivent les conseils du W3C sur l’encapsulation et l’imbrication. Le contrôle de la direction automatique suit la documentation MDN sur dir ; les derniers contrôles suivent les règles de rendu HTML.

Distinguez également l’ordre de l’alignement. text-align: right place le contenu en ligne contre le bord droit d’un bloc ; cela ne crée pas une expression isolée. text-align: start suit la direction du bloc ; un changement de direction de base peut donc aussi modifier le bord utilisé. Diagnostiquez séparément le problème d’ordre des caractères et la position de la ligne. MDN : text-align.

Pour la compatibilité, WHATWG indique que bdi et bdo sont pris en charge par tous les moteurs de navigateur actuels. Cela n’établit pas leur prise en charge dans tous les anciens navigateurs ou lecteurs intégrés. Pour vérifier un autre environnement de rendu, testez la cible réelle et conservez le balisage HTML directionnel : MDN le recommande plutôt qu’une isolation uniquement fondée sur CSS, car les styles peuvent être ignorés. Norme HTML : sémantique au niveau du texte, MDN : notes d’utilisation de bdi.

Terminez en prenant une décision explicite pour chaque expression imbriquée : sa direction de base, sa limite et le maintien ou non de l’ordre ordinaire de ses caractères internes. Pour un libellé indépendant, commencez par l’isolation. Ne gardez une incorporation ou une substitution que si son comportement documenté précis est requis par la mise en page.

Sources