<bdo> HTML Tag
- 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>
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: ????? ??????????
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.
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.