HTML BDI Tag Explained

The bdi (bi-directional isolate) tag can be used to help the browser with rendering bidirectional text when it fails to do so automatically.

Read the The Issue it solves section

The Issue it solves

<!-- Works good in LTR -->
<p>Hello World - 1st</p>
<!-- Works bad in RTL -->
<p>مرحبا بالعالم - 1st</p>

In the above example (even the code example you see is messed up because it’s being rendered by the browser) you can see the browser is having a hard time figuring out where the RTL text starts and ends and that is because the characters -, <space> and 1 are either neutral or weak in their default direction. In cases like these you can use the bdi tag to help out the browser and contain the directionality.

Read the Fixing the issue section

Fixing the issue

<p><bdi>Hello World</bdi> - 1st</p>
<p><bdi>مرحبا بالعالم</bdi> - 1st</p>

Here you will see the rendering is fixed (notice the rendering of the code example is fixed too) because we specify the start and end of the bidirectional text using the bdi tag.

In this example we didn’t need to wrap the english Hello World with the bdi tag but it’s good for consistency.

Read the Conclusion section

Conclusion

There it is the problem the bdi tag solves and how it solves it.

Leave a comment down below, if you have any questions!