dirglobal attribute has special semantics on this element.
bdi element represents
a span of text that is to be isolated from its surroundings for the
purposes of bidirectional text formatting. [BIDI]
dir global attribute defaults to
auto on this element (it never inherits from
the parent element like with other elements).
This element is especially useful when embedding user-generated content with an unknown directionality.
In this example, usernames are shown along with the number of
posts that the user has submitted. If the
bdi element were not used, the username of the
Arabic user would end up confusing the text (the bidirectional
algorithm would put the colon and the number "3" next to the word
"User" rather than next to the word "posts").
<ul> <li>User <bdi>jcranmer</bdi>: 12 posts. <li>User <bdi>hober</bdi>: 5 posts. <li>User <bdi>إيان</bdi>: 3 posts. </ul>