Using the HTML bdi Tag (Bi-Directional Isolation)
If the <bdi> (bi-directional Isolation) tag was not defined, the line with the Arabic word would start from the right and the number and text would be replaced. It is used to isolate the marked text bidirectionally. For example, this tag can be used when languages written from right to left, such as Arabic or Persian, are used in a line from left to right. The <bdi> tag does not reverse the direction of the marked text, it just tells the browser that the text should be read in the opposite direction.
<bdi> .. </bdi>
If we look at an example;
<p>Here, in a text that goes from left to right, thanks to the bdi tag,
<bdi>موقع الكتروني</bdi>
the Arabic text on the left appeared properly.</p>
Firefox and Chrome browsers support the <bdi> tag.
BDI stands for Bi-directional Isolation.
The <bdi> tag separates text that starts in a different direction from other text. (Ex: Arabic, Hebrew)
It is useful to use this tag to provide page layout when creating content with different text direction.