HTML <bdi> tag stands for Bidirectional Isolate Element. it’s wont to inform the browser to isolate the span of text which can be formatted in opposite directions than the encompassing text.
This tag is new in HTML5 and useful for languages like Arabic or Hebrew, or if the browser dynamically inserts some text without knowing the directionality of text.
Note: The directionality of content inside <bdi> doesn’t influence by the directionality of surrounding content.
Example:-
<!DOCTYPE html>
<html>
<body>
<h1>HTML bdi element</h1>
<p>In the example below, usernames are shown along side the amount of points during a contest. If the bdi element isn't supported within the browser, the username of the Arabic user would confuse the text (the bidirectional algorithm would put the colon and therefore the number "90" next to the word "User" instead of next to the word "points").</p>
<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>إيان</bdi>: 90 points</li>
</ul>
</body>
</html>Output:-
HTML bdi element
In the example below, usernames are shown along side the amount of points during a contest. If the bdi element isn’t supported within the browser, the username of the Arabic user would confuse the text (the bidirectional algorithm would put the colon and therefore the number “90” next to the word “User” instead of next to the word “points”).
- User hrefs: 60 points
- User jdoe: 80 points
- User إيان: 90 points
