Skip to content
RSS
HTML BDI Tag Explained

By

Raqueebuddin Aziz

July 10, 2023

Freelance Web Designer & Developer

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.

The Issue it solves

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

Hello World - 1st

مرحبا بالعالم - 1st

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.

Fixing the issue

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

Hello World - 1st

مرحبا بالعالم - 1st

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.

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!

Post on X Share on LinkedIN Post on Reddit

© 2024 Raqueebuddin Aziz. All rights reserved.