logo

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.

 <p>writer حارث: 4 articles.</p>
 <p>writer خطاب: 8 articles.</p>
 <p>writer <bdi>حارث</bdi>: 4 articles.</p>
 <p>writer <bdi>خطاب</bdi>: 8 articles.</p>
</>

writer حارث: 4 articles.

writer خطاب: 8 articles.

writer حارث: 4 articles.

writer خطاب: 8 articles.

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. R

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.

Tag Attributes

Attributes that are applicable to <bdi> tag

dir='auto':

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.

dir='rtl':

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

dir='ltr':

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

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.

Was this article helpful?