HTML Tutorial: Complete HTML Tutorial
About Lesson

Bi-Directional Text Control with <bdo> Tag

Concept and Implementation

The <bdo> element, standing for Bi-Directional Override, is a powerful tool in HTML that allows developers to control the direction of text within a document. This can be particularly useful when working with languages that are read from right to left, such as Arabic or Hebrew.

Sponsored by Google

The <bdo> element requires the dir attribute, which specifies the text direction inside the element. The value can be either "ltr" for left-to-right or "rtl" for right-to-left.

Example 1: Left-to-Right Text Direction

<!DOCTYPE html>
  <p>Normal text direction:</p>
  <p><bdo dir="ltr">This text is left-to-right.</bdo></p>

Example 2: Right-to-Left Text Direction

<!DOCTYPE html>
  <p>Overriding text direction:</p>
  <p><bdo dir="rtl">This text is right-to-left.</bdo></p>

Try it out below



Attribute Value Description
dir “ltr” / “rtl” Required. Specifies the text direction of the text inside the <bdo> element

Browser Support

Browser Support
Chrome Yes
Firefox Yes
Safari Yes
IE Yes
Edge Yes

Default CSS Settings

Most browsers will display the <bdo> element with the following CSS property:

unicode-bidi: bidi-override;

The <bdo> element also supports Global Attributes and Event Attributes in HTML.

By utilizing the <bdo> element, developers can ensure that text is displayed in the correct direction, regardless of the browser’s default settings or the surrounding text. This can be vital for maintaining the integrity and readability of multilingual content.