HTML Tags
HTML <bdi> Tag
The
<bdi>tag stands for Bi-Directional Isolation and is used to isolate a part of text that might have a different direction from the surrounding text.
Unlike<bdo>(which forces a direction),<bdi>allows the browser to automatically determine the correct direction based on the content.
It is particularly useful for user-generated content in multilingual or dynamic text environments.
Syntax
html
<bdi>Text with different direction</bdi>Attributes
| Attribute | Description |
|---|---|
| dir | Optional. Lets you manually set direction (ltr or rtl), though it’s often detected automatically. |
| class | Adds one or more class names for CSS styling. |
| id | Defines a unique identifier for the element. |
| style | Adds inline CSS for custom styling. |
| title | Shows extra information on hover. |
Example
html
<!DOCTYPE html>
<html>
<head>
<title>BDI Tag Example</title>
<style>
bdi {
background-color: #f0f0f0;
padding: 4px 6px;
border-radius: 4px;
color: #2c3e50;
}
table {
border-collapse: collapse;
margin-top: 10px;
}
td, th {
border: 1px solid #ccc;
padding: 8px 12px;
text-align: left;
}
</style>
</head>
<body>
<h1>HTML <bdi> Tag Example</h1>
<p>The <code><bdi></code> tag helps when you have mixed-direction text, such as English and Arabic usernames.</p>
<table>
<tr>
<th>Username</th>
<th>Score</th>
</tr>
<tr>
<td><bdi>John</bdi></td>
<td>95</td>
</tr>
<tr>
<td><bdi>إيمان</bdi></td> <!-- Arabic name (right-to-left) -->
<td>89</td>
</tr>
<tr>
<td><bdi>Ali_العربي</bdi></td> <!-- Mixed direction -->
<td>92</td>
</tr>
</table>
</body>
</html>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
The Arabic or mixed-direction usernames will display properly aligned without breaking the layout - the <bdi> tag isolates each name’s direction automatically.
Notes
- The
<bdi>element is useful for dynamic or user-generated content where text direction is unknown. - It ensures that the surrounding text layout remains consistent regardless of the inserted text’s language.
- You can use the optional
dirattribute to force a direction if needed. - Unlike
<bdo>,<bdi>doesn’t override the direction - it isolates it.
Conclusion
The <bdi> tag provides a smart and automatic solution for displaying multilingual text correctly.
It preserves layout and readability by isolating text direction without manual overrides - ideal for user names, comments, and mixed-language content.