<bdo> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
Learn How Fonts And Web Typography Work In HTML: A Beginner's Guide
What does <bdo> HTML Tag do?
The <bdo> element is used override the default directionality of text. It is used to display characters from languages that are read from right-to-left, such as Hebrew and Arabic.
Display
inline
Usage
textual

Bidirectional Override

The <bdo> element overrides the text-directionality of the surrounding text, which is useful if you need to place a word or phrase in an RTL (right-to-left) language (like Arabic or Hebrew) in an otherwise LTR (left-to-right) language (like English).

<p>The Arabic word for "website" is <bdo>???? ????????</bdo>, and in Hebrew it is <bdo>????? ??????????</bdo>.</p> 
The Arabic word for “website” is ???? ????????, and in Hebrew it is ????? ??????????.

But now we have a problem. If you don’t read Hebrew or Arabic, it may not be obvious but: the RTL text is actually backwards. The <bdo> element reverses the text from the source code.

With BDO:  <bdo>????? ??????????</bdo> Without: ????? ?????????? 
With BDO: ????? ?????????? Without: ????? ??????????

Notice that without <bdo>, the output matches the source. This is the desired behavior. The <bdo> element is a holdover from a time when character encoding did not deal well with RTL languages. Today, systems using Unicode (mostly everyone) can handle this without too much trouble. For this reason, the <bdo> should usually be avoided.

Note: There are some speciality cases where might be appropriate, but they are beyond the scope of this website. If you need to know a lot more about Internationalization in HTML, see the W3C’s Internationalization Activity Blog.

Bidirectional Isolation

You should not, however, simply leave RTL words and phrases without markup. This can cause unexpected problems. Use the <bdi> element (new in HTML5) to isolate bidirectional text and avoid display problems when mixing languages.

Adam is a technical writer who specializes in developer documentation and tutorials.