HTML <bdi> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <bdi> (Bi-Directional Isolation) HTML element isolates a span of text so that its text direction does not influence the surrounding content. This is especially important in multilingual web pages or applications where user-generated content may come in different writing directions, such as mixing left-to-right languages like English or French with right-to-left languages like Arabic or Hebrew. By using <bdi>, developers can prevent layout and readability issues caused by unexpected changes in text direction, ensuring that both the isolated content and its surrounding text maintain their intended flow and alignment.

Key points:

Purpose: Ensures that the text inside <bdi> is treated independently for text direction, without altering the directionality of the surrounding text.
Common use case: Displaying user names, comments, or other dynamic content that might be in a different writing direction than the main page.
Browser support: Fully supported in all modern browsers.
Default styling: Inline element with no visual effect by default.

Example:

<p>User <bdi>سلام</bdi> has logged in.</p>

If the page text is left-to-right (LTR), the Arabic text inside <bdi> will render correctly without affecting the surrounding English text layout.
This prevents text direction issues in mixed-language content.

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

Attributes

None

Global Attributes

The <bdi> tag also supports the Global Attributes in HTML5

Event Attributes

The <bdi> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <bdi> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.