<bdi>

The <bdi> (Bi-Directional Isolation) tag is an HTML tag useful for isolating a portion of text to manage its display in contexts where writing directions (left to right or right to left) are mixed.

It is particularly useful for ensuring correct presentation of multilingual content or texts containing sensitive data, such as names or identifiers, which can disrupt the layout if they follow a different writing direction.

Structure and syntax of the <bdi> tag

Basic structure and syntax

The <bdi> tag is a container tag that has:

• An opening tag: <bdi>.
• A closing tag: </bdi>.

Here is a simple example:

<bdi>Isolated text</bdi>

Usage example

Here is a practical example:

<p>User name: <bdi>John Doe</bdi></p>

In this example, the name "John Doe" is isolated from its context to ensure that its display respects the original writing order.

Difference with other similar tags

• <span>: Allows styling portions of text but does not manage directionality.
• <bdo>: Forces the directionality of the text, unlike <bdi>, which leaves it independent of the context.

Browser compatibility

The <bdi> tag is supported by most modern browsers.