BDI Stands for Bi-directional Isolation.
HTML BDI Tag segregates the part of the text which is arranged in a dissimilar way from the text neighboring it.
The bidirectional text isolation is pretty useful when we are dealing with content generated by users and we are uncertain about the direction of the text that may be generated.
Note: Bdi tag is new in HTML 5
We Will be looking at:
Syntax of Writing Bidirectional Text using HTML BDI Tag
<bdi> Some Text </bdi>
Example of Writing Bidirectional Text using HTML BDI Tag
|HTML Bidirectional Text Code||Output|
<p> And the top 3 list of winners is:</p> <ul> <li>User Name <bdi>John</bdi></li> <li>User Name <bdi>Mark</bdi> and, </li> <li>User <bdi> يوسف </bdi></li> </ul>
|And the top 3 list of winners is:
Here in the above Bidirectional Text example we can see that the last name in the list of winners will be displayed as aligned left to right as the formatting of the name is in Arabic language.
HTML Bidirectional Text Supporting Browsers