HTML bdi Tag

HTML <bdi> tag is used on a span of text that should be isolated from its surroundings for the purpose of bi-directional text formatting. What does this mean? Well, consider a webpage where you have content in multiple languages which are by default written in different directions, for example, English and Arabic. Now having text in both these languages in a single sentence can confuse the browser and this can lead to improper formatting of the text, and some words(or part of the sentence) can be shown before or after there actual position.

The term BDI stands for bi-directional Isolation.

• In HTML, we use the <bdi> tag to handle the text, generally provided by the user, which can be in the language which is written from right to left or in the opposite direction to the default language of the webpage.

• This element is useful for a variety of languages such as Arabic and Hebrew or for those too which are dynamically inserted by the browser without knowing the direction of the text.

HTML <bdi> Tag - Syntax and Usage

The <bdi> tag requires both opening (start) tag and closing(end) tag.

Required syntax for the same is given below:

<bdi>
    content goes here
</bdi>

HTML <bdi> Tag Example

The example below shows the application of the <bdi> tag. It's a bit complex example, but it shows the real-world use of this tag.

In the example below, we have created a simple form, for the user to enter feedback for our website, and then we show the feedback. Now the user can be from any country and can submit feedback in any language. Hence, to keep our user interface same, we can show the user input inside the <bdi> tag to provide bi-directional isolation to the user input text.

HTML <bdi> Tag Attributes

This element does not have any specific attributes although this element supports Global attributes and Event attributes.

Difference between <bdi> tag and <bdo> tag

In HTML, the <bdi> tag is new in HTML5 and also it is somehow similar to <bdo> tag. But there is a major difference between <bdi> tag and <bdo> tag. As we know that we use <bdi> tag on a span of text in order to isolate it from surrounding text while we use <bdo> tag to reverse the direction of the text. The <bdo> tag leads to error many times so try to use <bdi> tag in those cases too.

Browser Support for HTML <bdi> tag

Following browsers support this attribute:

• Firefox 10+

• Google Chrome 16+