HTML <bdi> Tag

The HTML <bdi> (Bi-Directional Isolation) tag is used to isolate a span of text that may have a different directionality than the surrounding text. It ensures the isolated text is displayed correctly in bi-directional text contexts, such as mixing left-to-right (LTR) and right-to-left (RTL) languages.

Why Use the <bdi> Tag?

When working with languages like Arabic (RTL) and English (LTR) together, the text directionality can create display issues. The <bdi> tag ensures the isolated text does not interfere with the surrounding content.

Basic Example of HTML <bdi> Tag

Here’s an example showing how the <bdi> tag works:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>BDI Tag Example</h2>
        <p>Usernames:</p>
        <ul>
            <li>Logged in as: <bdi>علي</bdi></li>
            <li>Logged in as: <bdi>JohnDoe</bdi></li>
        </ul>
    </body>
</html>

Explanation: Without the <bdi> tag, the Arabic name علي (RTL) might cause the surrounding text to align improperly. The <bdi> tag isolates it, ensuring proper display.

Attributes of HTML <bdi> Tag

The <bdi> tag does not have any specific attributes. However, it can be combined with CSS or JavaScript for advanced styling and control.

Special Cases for HTML <bdi> Tag

1. Mixing LTR and RTL Content

When mixing LTR and RTL text, the <bdi> tag prevents layout disruption:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Mixing LTR and RTL Example</h2>
        <p>Transaction details:</p>
        <ul>
            <li>Order ID: <bdi>12345علي</bdi></li>
            <li>Order ID: <bdi>67890John</bdi></li>
        </ul>
    </body>
</html>

Explanation: The <bdi> tag isolates the text direction of the mixed content, ensuring proper alignment for each entry.

2. Example Using CSS with <bdi> Tag

While the <bdi> tag provides bi-directional isolation, you can further style it for better visual representation:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            bdi {
                font-weight: bold;
                color: blue;
            }
        </style>
    </head>
    <body>
        <h2>Styling BDI Content</h2>
        <p>Usernames:</p>
        <ul>
            <li>Logged in as: <bdi>علي</bdi></li>
            <li>Logged in as: <bdi>JohnDoe</bdi></li>
        </ul>
    </body>
</html>
Using CSS with <bdi> Tag

Result: The usernames inside the <bdi> tags are styled with bold text and a blue color, making them visually distinct.