description & Usage
The <bdi> tag stands for Bi-Directional Isolation, meaning two-way separation.
The text within this tag is isolated from the directionality of the surrounding text (whether right to left or left to right).
For example, we want to write an English phrase (left to right - ltr) in a Persian text (right to left - rtl). Look at the example below:
<p>hello i'm ehsan eslami.</p>
<p>hello i'm احسان eslami.</p>
<p>hello i'm <bdi>احسان</bdi> eslami.</p>In the second and third lines, we have a bi-directional text (Persian and English). If you check the output of this code in a playground, you'll realize that the second <li> is unreadable, but in the third <li> the text has become readable using the <bdi> tag.
Notes
Note: The <bdi> tag is generally used for user-generated content whose directionality is unknown.
Browser compatibility and Support
| # | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <bdi> |
Global Attributes
The <bdi> tag supports the HTML Global Attributes.
Event Attributes
The <bdi> tag supports the HTML Event Attributes.
