bdi element
If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.
Table of contents
Description
The bdi
element isolates a pice of text from the surrounding content for bidirectional text formatting. This element becomes very helpful in situations where the bidirectional algorithm, responsible for automatically deciding the direction of text, could "get confused" and incorrectly change the direction of text.
Examples
In this example, there's a chat recreation, where the nicknames have been picked by the users involved. Next to each nickname, the points earned by the user are shown between brackets.
To stay in the safe side, the nicknames are being wrapped with the bdi
element, which will prevent the bidirectional algorithm from altering the direction of the surrounding text, just in case the nicknames are using a different direction (like these in hebrew).
<ul>
<li><b><bdi>Aaron</bdi> (2):</b> Hi!</li>
<li><b><bdi>נקניק</bdi> (5):</b> Hello! How are you?</li>
<li><b><bdi>Aaron</bdi> (2):</b> Well, it's been a hard week, but I think I can't blame.</li>
<li><b><bdi>נקניק</bdi> (5):</b> Wow, we're on the same moon...</li>
</ul>
- Aaron (2): Hi!
- נקניק (5): Hello! How are you?
- Aaron (2): Well, it's been a hard week, but I think I can't blame.
- נקניק (5): Wow, we're on the same moon...
To make absolutely clear what's the function of bdi
, the following example shows a representation of the same dialog, but in this case the program that generated the content didn't use the bdi
element to isolate the nicknames.
<ul>
<li><b>Aaron (2):</b> Hi!</li>
<li><b>נקניק (5):</b> Hello! How are you?</li>
<li><b>Aaron (2):</b> Well, it's been a hard week, but I think I can't blame.</li>
<li><b>נקניק (5):</b> Wow, we're on the same moon...</li>
</ul>
- Aaron (2): Hi!
- נקניק (5): Hello! How are you?
- Aaron (2): Well, it's been a hard week, but I think I can't blame.
- נקניק (5): Wow, we're on the same moon...
Attributes
Global attributes
For information about global attributes refer to this list of global attributes in HTML5.
Events
Global events
For information about global events refer to this list of global events in HTML5.