<bdi> HTML Tag
- Element of
- Learn How Fonts And Web Typography Work In HTML: A Beginner's Guide
- What does
<bdi> HTML Tagdo? - The <bdi> element is used to isolate a small section of text which may be formatted to run in the opposite direction than the text around it (such as right-to-left in a left-to-right context). This is useful when a language with right-to-left directionality, such as Arabic or Hebrew, is used inline with left-to-right languages.
- Display
- inline
- Usage
- semantic | textual
Code Example
<p>The Arabic word for "website" is <bdi>موقع الكتروني</bdi>, and in Hebrew it is <bdi>אֲתַר אִינטֶרנֶט</bdi>.</p>The Arabic word for "website" is موقع الكتروني, and in Hebrew it is אֲתַר אִינטֶרנֶט.
Text Direction
In English, text flows from left-to-right. Not all languages work this way, and so it is possible to set up a page, or even a section of a page, where the text flows from right-to-left.
/* Setting the Direction for the Whole Document */ body { direction: rtl; } /* Setting the Direction for only a section --- demo below */ .rtl { direction: rtl; } <div class="rtl"> <!-- Some English in an RTL environment. This will not display well. --> Experimentation is the greatest science. <!-- In Arabic, which is an RTL language. --> ??????? ????? ?????? </div> (If you’re wondering why the English wasn’t SDRAWKCAB, it’s because that isn’t how text direction works. In a document or section with RTL directionality, the source code would also be RTL. So text appears in the display the same way it appears in the source code — with some punctuation and alignment problems.)
Bidirectional Isolation
What if you need to have a single Arabic or Hebrew word or phrase within otherwise LTR text? That’s what the <bdi> element is for.
The Hebrew word for "computer" is <bdi>???????</bdi>. It is important, again, to realize that the <bdi> element does not reverse the direction of the characters in the source code. Rather, it provides information to the browser so that the presence of RTL characters in an other LTW environment (or vice-versa) does not cause a rendering problem.
Difference between <bdi> and <bdo>
The <bdi> element is new in HTML5, but it is very similar to the older <bdo> element. The difference is that <bdi> isolates the included text from the text around it, while <bdo> simply reverses the direction. The <bdo> element’s approach to in-context bidirectionality can cause unexpected rendering problems. For this reason, the newer <bdi> element is usually recommended. For a more in-depth look at <bdi>, and the related <bdo> element, see this blog post on the subject written by a member of W3C’s Internationalization Working Group.
