HTML <bdi> Tag

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The <bdi> HTML tag, which stands for "Bidirectional Isolation," is used to isolate a section of text that might have different text-directionality than the surrounding text. It's particularly useful for handling content in languages that are read from right to left (RTL), like Arabic or Hebrew, within a predominantly left-to-right (LTR) text environment. By using <bdi>, you ensure that the enclosed text maintains its own text-directionality, preventing unexpected visual issues or misinterpretation when displayed alongside LTR content. This tag is essential for web accessibility and ensuring that text is correctly rendered for readers in diverse linguistic contexts.

Properties

Permitted Parents: Any element that accepts phrasing content
Content: Inline and text
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<ol>

   <li>User <bdi>mod</bdi>: 965 posts</li>

   <li>User <bdi>user</bdi>: 322 posts</li>

   <li>User <bdi>إيان</bdi>: 150 posts</li>

   <li>User <bdi>abc1</bdi>: 1 post</li>

</ol>

Result

Editor