Description
The word BDI stands for Bi-Directional Isolation.
HTML element <bdi> is used to isolate and format a text in a different direction than its surrounding text.
This is mostly used to format dynamically generated text in an unknown direction.
The below table summarizes its usage.
| Usage Details | |
| Placement | It is displayed as an Inline element. |
| Contents | It can contain Inline elements and text. |
| Tags | Both opening and closing tags are required. |
| Versions | HTML5 |
Syntax
<bdi>...</bdi>Examples
In the below example, the third student's name is in Arabic which is read from right to left. which is different from the first two student names.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>HTML Element - bdi</h1>
<ul>
<li>Student Name <bdi>arun</bdi> secured 70 marks</li>
<li>Student Name <bdi>kumar</bdi> secured 80 marks</li>
<li>Student Name <bdi>آرون</bdi> secured 75 marks</li>
</ul>
</body>
</html>Attributes
The following table shows the list of supported and unsupported attributes for the <b> tag.
| Attribute Type | Details |
| Tag-Specific Attributes | The tag <bdi> does not have any tag-specific attributes. |
| Global Attributes | Like all other HTML tags, the tag <b> supports the HTML Global Attributes. |
| Event Attributes | The tag <b> also supports the HTML Event Attributes. |
Browser Compatibility
The tag <bdi> is supported in all modern browsers.
- Google Chrome 16+
- Internet Explorer or Edge x
- Firefox 10+
- Apple Safari x
- Opera x