Understanding the HTML `<bdi>` Element: Isolating Text Directionality

Learn about the HTML `<bdi>` (bidirectional isolation) element and its use in handling text with different directionalities (right-to-left, left-to-right). This guide explains when to use `<bdi>`, its browser compatibility, and how it ensures correct text rendering in multilingual and internationalized web pages.

Understanding the HTML <bdi> Element

What is the <bdi> Element?

The HTML <bdi> element (bidirectional isolation) is used to isolate a piece of text that might have a different directionality (text direction) than the surrounding text. This is particularly useful when you're embedding content from users, where you don't necessarily know the directionality of their text (right-to-left languages like Arabic or Hebrew versus left-to-right languages like English).

Example:

<p>Usernames: <bdi>إيان</bdi>, <bdi>jdoe</bdi>, <bdi>60points</bdi></p>

This isolates each username, ensuring correct rendering regardless of the overall text direction of the page.

Browser Support

Support for the <bdi> element varies across browsers. Check this table for the first version in each browser that fully supports it:

Attributes

The <bdi> element supports the standard global and event attributes.