HTML <bdi> Tag

The HTML <bdi> tag is used to create the 'bdi' element. This element is used on a span of text that needs to be isolated from its surroundings for the purposes of bidirectional text formatting.

This is useful when the text-direction is unknown, such as displaying user content where the directionality could change depending on the user. For example, a website with left-to-right text may display a list of usernames. Some users might have a username that runs right-to-left (such as Arabic, Hebrew, Persian, Thaana, Urdu, etc). In this case, the <bdi> element allows you to honor the correct directionality of the username.

While it's true that you can use the <bdo> tag to explicitly set the text direction, that tag is no good when the text direction is unknown (such is the case with user generated content). This is where the <bdi> comes in handy, as you can isolate the text with the unknown text direction from its surrounding text.

Syntax

The <bdi> tag is written as <bdi></bdi> with the text with the unknown directionality inserted between the start and end tags.

Like this:

Example

Here is a list of usernames from an online forum website. Note that each username is marked up with the <bdi> tag.

Below is an example of what would happen if we didn't use the <bdi> tag. Notice that the position of the third username (إيان) and the number of posts has been switched around. The number of posts is now to the left of the username. This is because the browser thinks that the post count is part of the Arabic text. To overcome this, we can use the <bdi> tag as we did above.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

The <bdi> element accepts the following attributes.

* Note that the global dir attribute defaults to auto on this element (it never inherits from the parent element like with other elements).

Global Attributes

The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the <bdi> tag , as well as with all other HTML tags.

• accesskey
• autocapitalize
• class
• contenteditable
• data-*
• dir
• draggable
• hidden
• id
• inputmode
• is
• itemid
• itemprop
• itemref
• itemscope
• itemtype
• lang
• part
• slot
• spellcheck
• style
• tabindex
• title
• translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handlers

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

• onabort
• onauxclick
• onblur
• oncancel
• oncanplay
• oncanplaythrough
• onchange
• onclick
• onclose
• oncontextmenu
• oncopy
• oncuechange
• oncut
• ondblclick
• ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• ondragover
• ondragstart
• ondrop
• ondurationchange
• onemptied
• onended
• onerror
• onfocus
• onformdata
• oninput
• oninvalid
• onkeydown
• onkeypress
• onkeyup
• onlanguagechange
• onload
• onloadeddata
• onloadedmetadata
• onloadstart
• onmousedown
• onmouseenter
• onmouseleave
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onpaste
• onpause
• onplay
• onplaying
• onprogress
• onratechange
• onreset
• onresize
• onscroll
• onsecuritypolicyviolation
• onseeked
• onseeking
• onselect
• onslotchange
• onstalled
• onsubmit
• onsuspend
• ontimeupdate
• ontoggle
• onvolumechange
• onwaiting
• onwheel

Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.

For more detail, see HTML event handler content attributes.