Balise HTML <bdi>
La balise <bdi> (isolation bidirectionnelle) est l'un des éléments HTML5. Elle est utilisée pour isoler un texte bidirectionnel lorsqu'une langue à direction de droite à gauche (comme l'arabe ou l'hébreu) est utilisée conjointement avec des langues à direction de gauche à droite. Notez que la balise <bdi> ne retourne pas physiquement le texte ; elle se contente de l'isoler afin que l'algorithme bidirectionnel du navigateur puisse déterminer sa direction de manière indépendante.
Le texte bidirectionnel peut contenir des séquences de caractères disposés de droite à gauche (RTL) et des séquences de caractères disposés de gauche à droite (LTR). Pour gérer cela, les navigateurs utilisent l'algorithme bidirectionnel Unicode, qui attribue une directionnalité spécifique à chaque caractère. Certains caractères (par exemple, certaines ponctuations et espaces) sont traités comme neutres, et leur directionnalité dépend de celle de leurs caractères voisins.
En général, l'algorithme bidirectionnel fonctionnera correctement et il ne sera pas nécessaire de fournir de balisage spécial. Cependant, parfois, l'algorithme peut avoir besoin d'aide. Dans de tels cas, la balise <bdi> est utilisée.
La balise <bdi> englobe un segment de texte et fonctionne de la manière suivante :
- La directionnalité du texte intégré dans la balise
<bdi>n'affecte pas la directionnalité du texte environnant. - La directionnalité du texte environnant n'affecte pas la directionnalité du texte intégré dans la balise
<bdi>.
La balise <bdi> est similaire à l'ancienne <bdo> balise. L'élément <bdi> isole le texte contenu du texte qui l'entoure, tandis que <bdo> se contente d'inverser la direction. Il est généralement recommandé d'utiliser <bdi> pour éviter les problèmes de rendu inattendus qui peuvent survenir avec <bdo> .
Syntaxe
La balise <bdi> s'utilise par paires. Le contenu est écrit entre la balise d'ouverture (<bdi>) et la balise de fermeture (</bdi>).
Exemple de la balise HTML <bdi> :
Balise HTML <bdi>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1> Example of using the bdi element </h1>
<p dir="ltr"><bdi>أرمينيا جميلة</bdi> This sentence in Arabic is automatically displayed from right to left.</p>
</body>
</html>Résultat
Attributs
La balise <bdi> prend en charge les Attributs globaux et les Attributs d'événement.
Comment styliser une balise HTML <bdi>
bdi {
color: blue;
font-weight: bold;
}Pratique
Quel est l'objectif de la balise HTML <bdi> ?