HTML5 <bdi> Tag

The HTML <bdi> ( or bidirectional isolation) tag is used to isolates a span of text that might be formatted in a different direction from other text located outside it. This element is useful when you need to embed text with an unknown directionality, from a database for example, inside text with a fixed directionality.

The only content permitted inside this element is Phrasing content. Both the starting and ending tag are mandatory for this element. The parent of the <bdi> tag can be any element that accepts phrasing content.

When not set, the default value is auto. This value lets the browser decide the direction based on the element’s content.

The same visual effect can be achieved using the CSS rule unicode-bidi: isolate on a <span> or another text-formatting element. However, the semantic meaning of the content is only conveyed by the <bdi> element.

The following style is applied to this element by default:

bdi {
  unicode-bidi: -webkit-isolate; 
}

Here is an example of using this tag:

<p>User <bdi>WeberXx</bdi> : 12 posts.</p>
<p>User <bdi>HoberYx</bdi> : 5 posts.</p>
<p>User <bdi>إيان</bdi> : 3 posts.</p>

Examples

See the Pen HTML bdi Tag by Tutorialio (@tutorialio) on CodePen.

Attributes

This element only accepts global attributes.

Further Reading

  1. Read more about the HTML <bdi> element on MDN.
  2. You can also read the HTML <bdi> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top