Propriété CSS unicode-bidi
La propriété CSS unicode-bidi contrôle l'intégration du texte. Elle fonctionne uniquement avec la propriété direction. Voir la syntaxe et des exemples pratiques.
La propriété unicode-bidi contrôle la façon dont le texte bidirectionnel (bidi) — un texte qui mélange des scripts de gauche à droite et de droite à gauche — est mis en page, vous permettant de remplacer l'algorithme bidirectionnel Unicode intégré du navigateur.
La plupart des pages n'en ont jamais besoin. Les navigateurs réordonnent déjà correctement le texte latin/arabe/hébreu mélangé grâce à l'algorithme bidirectionnel Unicode. On fait appel à unicode-bidi uniquement lorsque ce comportement par défaut est incorrect : par exemple, lorsqu'une valeur isolée (un numéro de téléphone, un nom d'utilisateur, un prix) fait fuir sa direction dans la phrase environnante, ou lorsque vous souhaitez délibérément forcer un ordre visuel.
En pratique, unicode-bidi est associée à la propriété direction : direction détermine le sens de base du texte, et unicode-bidi décide à quel point cette direction de base est appliquée. Ensemble, elles constituent l'équivalent CSS de l'attribut HTML dir et des éléments <bdo>/<bdi>.
unicode-bidi n'a un effet visible que lorsque l'élément contient également du texte à directions mixtes. Seule, elle ne fait rien — elle fonctionne main dans la main avec la propriété direction.
| Valeur initiale | normal |
|---|---|
| S'applique à | Tous les éléments, bien que certaines valeurs n'aient aucun effet sur les éléments non-inline. |
| Hérité | Oui. |
| Animable | Non. |
| Version | CSS2 |
| Syntaxe DOM | object.style.unicodeBidi = "isolate"; |
Syntaxe
Valeurs CSS de unicode-bidi
unicode-bidi: normal | embed | bidi-override | isolate | isolate-override | plaintext | initial | inherit;Exemple de la propriété unicode-bidi :
Dans l'exemple ci-dessous, le bloc .text utilise direction: rtl avec unicode-bidi: embed. La phrase arabe conserve son ordre naturel de droite à gauche, tandis que l'intégration ajoute un niveau d'intégration bidi supplémentaire afin que l'ensemble du bloc soit traité comme allant de droite à gauche — la ponctuation et les mots latins sont positionnés par rapport à cette base de droite à gauche.
Exemple de code CSS unicode-bidi
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.text {
direction: rtl;
unicode-bidi: embed;
}
</style>
</head>
<body>
<h2>Unicode-bidi property example</h2>
<div>Normal writing direction. مرحبا بالعالم</div>
<div class="text">Using "embed" value. مرحبا بالعالم</div>
</body>
</html>Exemple de la propriété unicode-bidi avec la valeur "bidi-override" :
bidi-override est la valeur la plus agressive : elle ignore la direction inhérente des caractères et dispose chaque caractère strictement dans l'ordre défini par direction. Avec direction: rtl ci-dessous, même le texte latin est inversé caractère par caractère, aussi cette valeur est-elle principalement utile pour des effets spéciaux plutôt que pour du texte de document réel.
Exemple CSS unicode-bidi bidi-override
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.text {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<h2>Unicode-bidi property example</h2>
<div>Normal writing direction. مرحبا بالعالم</div>
<div class="text">Using "bidi-override" value. مرحبا بالعالم</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| normal | Ne suggère pas de niveau d'intégration supplémentaire. |
| embed | Ouvre un niveau d'intégration supplémentaire si l'élément est inline. |
| bidi-override | Crée un remplacement pour un élément inline. Pour les éléments conteneurs de type bloc, cette valeur crée un remplacement pour les descendants de niveau inline. |
| isolate | L'élément est isolé de ses voisins. Cette valeur indique que la directionnalité du conteneur de l'élément doit être calculée sans tenir compte du contenu de cet élément. |
| isolate-override | Applique le comportement d'isolation au contenu environnant et le comportement de remplacement au contenu interne. |
| plaintext | Cette valeur se comporte comme la valeur isolate, mais la directionnalité est calculée à l'aide des règles P2 et P3 de l'algorithme bidirectionnel Unicode. |
| initial | Définit la propriété à sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Quelle valeur utiliser ?
- Intégrer simplement une phrase dans la direction opposée ? Utilisez
embedavec la valeur direction correspondante. C'est le cas classique : « citer de l'arabe dans un paragraphe en anglais ». - Insérer du texte généré par l'utilisateur de direction inconnue (un nom, un commentaire, un terme de recherche) ? Préférez
isolate. Cela empêche ce fragment de faire basculer la direction des mots qui l'entourent — la même protection qu'offre l'élément HTML<bdi>. plaintextest destiné au contenu tel que les messages de chat ou les lignes de journal, où chaque paragraphe doit choisir sa propre direction à partir de son premier caractère fort, au lieu d'en hériter une de la page.bidi-overridedevrait rester rare. N'y recourez que lorsque vous souhaitez intentionnellement forcer l'ordre visuel (par exemple inverser du texte comme effet), car cela remplace l'ordre de lecture naturel de chaque caractère.
Notez que unicode-bidi n'est pas animable, donc les transitions et les animations n'ont aucun effet sur elle.
Propriétés associées
- direction — définit la direction de base du texte (
ltrourtl) sur laquelleunicode-bidis'appuie. - writing-mode — contrôle le flux de blocs horizontal ou vertical.
- text-align — aligne le texte dans sa boîte de ligne, ce qui nécessite souvent un ajustement pour le contenu RTL.