Skip to content
Click Here to get a free report on how to make your website faster
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!

Tweet Share on LinkedIN Post on Reddit

Looking for a dev to build a MVP for your tech startup?

I can help you out.

Contact

We use cookies to enhance your browsing experience and analyze website traffic. By continuing to use our website, you consent to the use of cookies in accordance with our Privacy Policy.

Privacy Policy