Web Development Course:
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.
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.
Mobile browser support
HTML5 Tags List: Get to Know the Most Useful Elements
Find HTML5 tags explained and illustrated with beginner-friendly HTML5 examples. Grasp the difference between HTML5 tags & elements and learn to use both!