CSS - Propriété Unicode-bidi : Maîtriser le Texte Bidirectionnel
Bonjour à tous, futurs développeurs web ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde du CSS et explorer une propriété qui pourrait sembler un peu intimidante au départ : unicode-bidi. Mais ne vous inquiétez pas, à la fin de ce tutoriel, vous serez capable de gérer le texte bidirectionnel comme un pro !
Qu'est-ce que Unicode-bidi ?
Avant de plonger dans les détails, comprenons ce qu'est unicode-bidi. Imaginez que vous écrivez un site web multilingue qui inclut à la fois l'anglais (de gauche à droite) et l'arabe (de droite à gauche). Comment vous assurez-vous que chaque langue s'affiche correctement ? C'est là que unicode-bidi entre en jeu !
La propriété unicode-bidi est votre fidèle allié lors de la gestion du texte bidirectionnel dans le CSS. Elle vous aide à contrôler la manière dont le texte bidirectionnel est traité dans un document, garantissant que votre contenu est affiché correctement indépendamment de la direction d'écriture.
Valeurs Possibles
Jetons un coup d'œil aux valeurs possibles pour la propriété unicode-bidi :
| Valeur | Description |
|---|---|
| normal | L'élément n'ouvre pas un niveau supplémentaire d'embedding |
| embed | Ouvre un niveau supplémentaire d'embedding |
| bidi-override | Crée une override pour l'algorithme bidirectionnel |
| isolate | L'élément est isolé de ses frères |
| isolate-override | Combine les effets de 'isolate' et 'bidi-override' |
| plaintext | L'élément est isolé et le formatage bidirectionnel est réinitialisé |
Ne vous inquiétez pas si ces valeurs semblent confuses maintenant. Nous les explorerons en détail avec des exemples !
S'applique à
La propriété unicode-bidi peut être appliquée à tous les éléments. Cependant, elle est le plus souvent utilisée avec des éléments en ligne ou des éléments définis avec display: inline.
Syntaxe DOM
Pour utiliser unicode-bidi dans votre JavaScript, vous pouvez utiliser la syntaxe suivante :
object.style.unicodeBidi = "value"Maintenant, plongeons dans chaque valeur et voyons comment elles fonctionnent en action !
CSS unicode-bidi - Valeur normal
La valeur normal est le réglage par défaut. Elle n'ouvre pas un niveau supplémentaire d'embedding par rapport à l'algorithme bidirectionnel.
<p style="unicode-bidi: normal;">
This is English text. ذلك نص عربي.
</p>Dans cet exemple, le texte sera affiché comme suit :
This is English text. ذلك نص عربي.
Le texte anglais est de gauche à droite, tandis que le texte arabe est de droite à gauche, suivant leurs directions naturelles.
CSS unicode-bidi - Valeur embed
La valeur embed ouvre un niveau supplémentaire d'embedding par rapport à l'algorithme bidirectionnel.
<p style="unicode-bidi: embed; direction: rtl;">
This is English text. ذلك نص عربي.
</p>Cela s'affichera comme suit :
.ذلك نص عربي This is English text.
Ici, tout le paragraphe est traité comme de droite à gauche, mais le texte anglais conserve sa direction de gauche à droite à l'intérieur du contexte RTL global.
CSS unicode-bidi - Valeur bidi-override
La valeur bidi-override crée une override pour l'algorithme bidirectionnel. Elle force la directionnalité du texte pour correspondre à la propriété direction.
<p style="unicode-bidi: bidi-override; direction: rtl;">
This is English text. ذلك نص عربي.
</p>Cela s'affichera comme suit :
.ريبع صن اذه .txet hsilgnE si sihT
Dans ce cas, tout le texte est traité strictement comme de droite à gauche, même en inversant l'ordre des caractères dans le texte anglais.
CSS unicode-bidi - Valeur isolate
La valeur isolate isole l'élément de ses frères en termes de formatage bidirectionnel.
<p>This is <span style="unicode-bidi: isolate; direction: rtl;">ذلك نص عربي</span> some English text.</p>Cela s'affichera comme suit :
This is ذلك نص عربي some English text.
Le texte arabe est isolé et affiché de droite à gauche, tandis que le texte anglais environnant reste inchangé.
CSS unicode-bidi - Valeur isolate-override
La valeur isolate-override combine les effets de isolate et bidi-override.
<p>This is <span style="unicode-bidi: isolate-override; direction: rtl;">English text</span> in a sentence.</p>Cela s'affichera comme suit :
This is txet hsilgnE in a sentence.
Le texte à l'intérieur de l'élément span est isolé et strictement inversé.
CSS unicode-bidi - Valeur plaintext
La valeur plaintext isole l'élément et réinitialise le formatage bidirectionnel à sa direction implicite.
<p style="direction: rtl;">
This is <span style="unicode-bidi: plaintext;">some English text</span> بعض النص العربي
</p>Cela s'affichera comme suit :
بعض النص العربي some English text This is
Le texte anglais à l'intérieur de l'élément span est affiché dans sa direction naturelle de gauche à droite, indépendamment de la direction de droite à gauche du parent.
Propriétés Associées
Lorsque vous travaillez avec unicode-bidi, vous trouverez souvent ces propriétés associées :
| Propriété | Description |
|---|---|
| direction | Définit la direction du texte |
| writing-mode | Définit si les lignes de texte sont disposées horizontalement ou verticalement |
Souvenez-vous, la propriété unicode-bidi travaille de pair avec la propriété direction pour contrôler le flux du texte bidirectionnel.
Conclusion
Félicitations ! Vous venez de plonger dans le monde du unicode-bidi. Cette propriété peut sembler complexe au départ, mais elle est extrêmement précieuse lors de la création de sites web multilingues. Souvenez-vous, la pratique rend parfait, donc n'hésitez pas à expérimenter avec différentes valeurs et voyez comment elles affectent votre texte.
While you continue your journey in web development, you'll encounter many situations where understanding bidirectional text is crucial. Whether you're creating a website for a global audience or working on a localization project, the skills you've learned today will serve you well.
Keep coding, keep learning, and most importantly, have fun ! The world of web development is full of exciting challenges, and mastering properties like unicode-bidi is just the beginning of your adventure. Happy coding!
Credits: Image by storyset