HTML bdi: Main Tips
<bdi>element separates text which needs to be displayed in a different direction than the rest of the content.
<bdi>in HTML is similar to <bdo>. The main difference between these elements is that
<bdi>separates and changes the direction of text, while
<bdo>only reverses the direction.
Theory is great, but we recommend digging deeper!
Purpose of bdi
<bdi> isolates the specified part of the text and displays it in a different direction than the surrounding content. Therefore, you can add Arabic or Hebrew phrases or words in the right to left direction instead of left to right.
<h2><bdi>مرحبا بالعالم</bdi> That means Hello World in Arabic.</h2>
Note: the use of this reverse tag helps to add Arabic content in non-Arabic websites that follow the regular left to right direction.