W3docs
en
Log in

HTML <bdi> Tag

Use HTML <bdi> tag which is used to isolate bidirectional text. The tag only tells the browser that the text should be read in the opposite direction.

The <bdi> tag (bidirectional isolation) is one of the HTML5 elements. It is used to isolate a bidirectional text when a language with right-to-left directionality (such as Arabic or Hebrew) is used in line with left-to-right languages. Note that the <bdi> tag does not physically turn the text; it simply isolates it so the browser's bidirectional algorithm can determine its direction independently.

Bidirectional text can contain sequences of characters arranged right-to-left (RTL) and sequences of characters arranged left-to-right (LTR). To handle this, browsers use the Unicode Bidirectional Algorithm in which characters are given a certain directionality. Some characters (e.g. some punctuation and spaces) are treated as neutral, and their directionality depends on the directionality of their near characters.

In general, the bidirectional algorithm will work properly, and there won’t be a need to provide a special markup. However, sometimes the algorithm may need help. In such cases, <bdi> is used.

The <bdi> tag wraps a text span and works in the following ways:

  • The directionality of text embedded in the <bdi> tag doesn’t affect the directionality of the surrounding text.
  • The directionality of the surrounding text doesn't affect the directionality of text embedded in the <bdi> tag.

The <bdi> tag is similar to the older <bdo> tag. The <bdi> element isolates the contained text from the text around it, whereas <bdo> just reverses the direction. It is generally recommended to use <bdi> to prevent unexpected rendering problems that can arise with <bdo> .

Syntax

The <bdi> tag comes in pairs. The content is written between the opening (<bdi>) and closing (</bdi>) tags.

Example of the HTML <bdi> tag:

HTML <bdi> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1> Example of using the bdi element </h1>
    <p dir="ltr"><bdi>أرمينيا جميلة</bdi> This sentence in Arabic is automatically displayed from right to left.</p>
  </body>
</html>
Try it Yourself »

Result

bdi exemple

Attributes

The <bdi> tag supports the Global Attributes and the Event Attributes.

How to style an HTML <bdi> Tag

bdi {
  color: blue;
  font-weight: bold;
}

Practice

Practice

What is the purpose of the HTML <bdi> tag?