Unicode-bidi - Propriété CSS

Schéma de la syntaxe de unicode-bidi.

Schéma syntaxique de la propriété unicode-bidi.
Télécharger le schéma en SVG.

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.

Remarque : la propriété unicode-bidi et direction ne sont pas incluses dans celles qui sont initialisées par all.

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

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;

  La propriété direction, si elle est présente, est ignorée.

• 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 a la valeur normal, on peut constater que :

• Sur la premiere ligne, le texte est en français, il n'y a pas de règle CSS avec direction.
• Sur la deuxième ligne, le texte est toujours en français mais avec la règle direction:rtl; (ce qui n'est pas très logique).
• Enfin la troisième ligne est en langue arabe, sans règle avec direction.
• Nous donnons également un texte en SVG (balise text).

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 au sujet de la gestion des caractères miroirs (les parenthèses) avec plain-text.

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

  Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

  Concernant unicode-bidi. 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

  Concernant unicode-bidi. 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

  Concernant unicode-bidi. 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 Module CSS - Modes d'écriture. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :