HTML bdi - how to use <bdi> tag

The <bdi> tag, Bi-Directional Isolation, defines a part of the text that might be formatted in a different direction from the other text in the document. This is helpful when a text needs to be displayed but the direction is not known. For example, we can display usernames from a database and Arabic names will be displayed from right to left.


The bdi tag supports the global and event attributes.


<div> <p>Normal paragraph</p> <p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p> </div>