HTML Bdi Tag

Bidirectional Text HTMLBidirectional Text can be written in HTML using the HTML BDI Tag. In other words we can say that whenever we want to write bidirectional text in html we use the HTML BDI Tag.

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


 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:

  • User Name John
  • User Name Mark and,
  • User يوسف

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 Bdi Tag Support all HTML Global Attributes and HTML Event Attributes.


HTML Bidirectional Text Supporting Browsers

S. No. Browser Supported(Yes/No)
1 Internet Explorer No
2 Firefox Yes
3 Google Chrome Yes
4 Opera No
5 Safari No

Tagged , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.