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.

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.

Unlike with any other element in the standard, the value of the dir attribute isn't inherited in bdi. It's default value is always auto.

The bdi element has been introduced in HTML5 and isn't fully supported by browsers. Although its use is harmless, authors should consider to complement it with CSS for compatibility reasons.

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.