unicode-bidi - Propriété CSS
Résumé des caractéristiques de la propriété unicode-bidi
normal
| bidi-override
| embed
| isolate
| isolate-override
| plaintext
normal
unicode-bidi
ne peut pas être animée.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.
Syntaxes pour unicode-bidi
.
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
etbidi-override
. - unicode-bidi: plaintext;
- unicode-bidi:
initial
; unicode-bidi:inherit
; unicode-bidi:revert
; unicode-bidi:revert-layer
; unicode-bidi:unset
;La valeur initiale est :
.normal
Animation de la propriété 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 figue :
- 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, 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.
- Enfin, 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
.
On peut déjà observer que, sur une balise span, l'application de la propriétédirection
n'a aucun effet. En effet, seuls les éléments bdo gère le sens d'écriture de façon native.
Le simulateur applique la propriété unicode-bidi
avec la valeur choisie sur chacune de ces trois portions de texte.
Observez en particulier la gestion des signes de ponctuation (le point d'exclamation) et des caractères
miroir (les parenthèses).
En choisissant "Supprimer la propriété", vous confiez la gestion de la direction d'écriture totalement à l'algorithme bidi.
⚠ Remarque : le comportement de Chrome est particulier : par exemple un retour sur la valeur normal
ne donne pas toujours le même résultat.
rtl
: ( تحيا الأنماط !)Prise en charge par les navigateurs (compatibilité).
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.
unicode-bidi
par les différents navigateurs.
isolate
dans la syntaxe de unicode-bidi
.
plaintext
.
isolate-override
.
unicode-bidi
isolate
plaintext
isolate-override
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que unicode-bidi
.
Les spécifications CSS éditées par le W3C sont organisées en modules. unicode-bidi
fait partie du Module CSS - Modes d'écriture (CSS Writing Modes). Les définitions suivantes sont également décrites dans ce même module.