HTML bdi tag

Html <bdi> tag stands for 'bidirectional isolation'. bdi tag isolates a piece of text from the surrounding text with respect to direction. Then the text does not inherit its direction from parent elements.


 <li>writer john: 3 articles.</li>
 <li>writer chris: 5 articles.</li>
 <p>writer <bdi>حارث</bdi>: 4 articles.</p>
 <p>writer <bdi>خطاب</bdi>: 8 articles.</p>
Try </>

If bdi is not used, then: 4 would be after 'writer' ending up in confusing.

The reason is simple. English starts from the left and the Arabic language starts from the right.

We are using the Arabic language in the English language. We use bdi to isolate the Arabic from the English. Remove bdi tag to understand it.

Tip: If the Arabic language is written in English language, then Arabic inherits its direction from the English language.As a result, complexities may arise. In this case, bdi is more appropriate.

Tag omission

Both starting and ending tags are necessary for the bdi element.

Global Attributes

All the global attributes are applicable on the bdi element.

Specific Attributes


It is a default value for bdi element. In the presence of this attribute, an element never inherits the direction of text from the parent element. See the example above.


rtl value indicates that the direction of text is from right to left. For example, Arabic language


ltr value indicates that the text is from left to right.For example, English language.

Was this article helpful?




Get the newsletter