Unicode-bidi - Propriété CSS

Schéma de la syntaxe de unicode-bidi.

Description de la propriété unicode-bidi.

Lorsque un texte contient des parties écrites de gauche à droite, et des parties écrites de droite à gauche, comme par exemple d'un texte en français qui inclut des mots arabes, les navigateurs utilisent un algorithme bien défini pour afficher correctement chacune des parties du texte. Cet algorithme est connu sous le nom d'algorithme bidi.

Ce résultat a été obtenu sans qu'il soit nécessaire d'indiquer quoi que ce soit au navigateur : l'algorithme bidi se base sur les informations contenues dans les polices de caractères. Chacun des caractères est en effet typé ltr ou rtl suivant qu'il doit se lire de gauche à droite, ou de droite à gauche.

Néanmoins, certains caractères ne disposent pas de cette information, ou bien leur direction d'écriture dépend du contexte : les chiffres, les caractères de ponctuation, les espaces, etc. L'algorithme bidi peut, dans certains cas, ne pas restituer correctement le texte.

Un autre problème est celui des caractères miroir : les parenthèses, les signes < et >, etc. Quand la direction d'écriture change, ces caractères doivent être permutés.
Exemple : si on inverse l'écriture de (CSS) cela devient )SSC(. Il faut donc permuter les parenthèses pour obtenir un résultat correct : (SSC).

La propriété unicode-bidi permet de prendre la main sur l'algorithme bidi pour résoudre certains problèmes particuliers concernant la restitution des textes bidirectionnels. Mais son usage n'est pas si fréquent : l'algorithme bidi résout très bien la plupart des cas de figure.

Consultez également la page sur la propriété direction qui permet de forcer la direction d'écriture, et ce petit tutoriel sur la direction d'écriture (ltr ou rtl).

Remarque : HTML comporte une balise réservée au traitement bidirectionnel du texte : bdo avec son attribut dir. Il est conseillé d'utiliser cette balise plutôt que la propriété CSS direction, car il ne s'agit pas ici de mise en forme, mais de rendre le texte compréhensible.

Valeurs pour unicode-bidi.

• unicode-bidi: normal;

  La direction d'écriture est déterminée par l'algorithme bidi, sans consigne ni contrainte supplémentaire.

• unicode-bidi: embed;

  Cette valeur n'a d'effet que sur les éléments du type inline. Le traitement bidirectionnel est activé pour l'élément. La direction du texte est alors déterminée par la propriété direction.

• unicode-bidi: isolate;

  Cette valeur n'a d'effet que sur les éléments du type inline. Le traitement bidirectionnel est activé avec un traitement particulier des sauts de paragraphes.

• unicode-bidi: bidi-override;

  La propriété direction prend le pas sur l'algorithme bidi : elle détermine prioritairement la direction du texte.

• unicode-bidi: isolate-override;

  Cumul des fonctionnalités des valeurs isolate et bidi-override.

• unicode-bidi: plaintext;

• unicode-bidi: initial; (normal) unicode-bidi: inherit; unicode-bidi: revert; unicode-bidi: revertLayer; unicode-bidi: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de unicode-bidi.

La propriété unicode-bidi ne peut pas être animée. Cela présenterait d'ailleurs un intérêt très limité.

Simulateur pour unicode-bidi.

Le simulateur permet de constater l'effet de la propriété unicode-bidi sur le texte bidirectionnel dans plusieurs cas de figure. Au chargement de la page, unicode-bidi la valeur normal, on peut constater que :

• Sur la première ligne, les caractères de couleur orange sont identifiés rtl (de droite à gauche) dans la police de caractères. Ici il s'agit de caractères arabes. Sans qu'il soit nécessaire de préciser quoi que ce soit, l'algorithme bidi positionne ces caractères de droite à gauche (ce n'est pas évident pour ceux qui ne connaissent pas l'arabe). On note cependant que le point d'exclamation devrait se trouver à la fin de la phrase, c'est à dire sur la gauche.
• Sur la deuxième ligne, la partie de texte en bleu est insérée dans une balise bdo dir="rtl", ce qui force son écriture de droite à gauche, bien que ce soient des caractères latins, qui s'écrivent normalement de gauche à droite.
• Sur la troisième ligne, le texte en vert est inséré dans une balise span et la direction d'écriture a été définie par la propriété direction:rtl.
• Enfin, le texte SVG est une simple balise text dont la direction d'écriture a été définie avec la propriété direction:rtl.

Le simulateur applique la propriété unicode-bidi avec la valeur choisie sur chacune de ces quatre portions de texte. Observez en particulier la gestion des signes de ponctuation (le point d'exclamation) et des caractères miroir (les parenthèses).

⚠ Remarque : le comportement de Chrome est particulier : par exemple un retour sur la valeur normal ne donne pas toujours le même résultat.

Compatibilité des navigateurs avec unicode-bidi.

Si unicode-bidi est globalement bien reconnue par les navigateurs, certaines des valeurs acceptées par la propriété n'ont été prise en charge que récemment par les navigateurs.

1

Propriété
unicode-bidi

2

Valeur
isolate

3

Valeur
plaintext

4

Valeur
isolate-override

Estimation de la prise en charge globale.

96%

95%

95%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Caniuse

Histoire de la propriété unicode-bidi.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Définition initiale de la propriété unicode-bidi, avec les valeurs normal, embed et bidi-override.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Modes d'écriture - Niveau 3

  Ajout de nouvelles valeurs pour la propriété unicode-bidi : isolate, isolate-override et plaintext .
  

  02 Décembre 2010

  Document de travail.

  

  20 Mars 2014

  Candidat à la recommandation.

  

  24 Octobre 2019

  Proposé à la recommandation.

  

  10 Décembre 2019

  Recommandation.

• Module CSS - Modes d'écriture - Niveau 4

  Pas de changement concernant la propriété unicode-bidi.
  

  07 Décembre 2017

  Document de travail.

  

  24 Mai 2018

  Candidat à la recommandation.

  

  

Voir aussi, à propos de l'écriture bidirectionnelle.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété unicode-bidi fait partie du module CSS Writing Modes. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :