HTML <bdo> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <bdo> (Bidirectional Override) HTML element is used to control the direction in which text is displayed, overriding the default or inherited text direction. This is especially useful in multilingual documents where text from right-to-left (like Arabic or Hebrew) may appear inside a left-to-right layout, or vice versa. By using <bdo>, you can ensure that text renders in the intended reading order, improving readability and preventing layout issues.

Unlike other text formatting elements, <bdo> does not change the content itself - it only affects how the text is displayed. It can be applied to short phrases, entire paragraphs, or inline sections of text, providing precise control over text flow.

The element is particularly valuable for:

Multilingual content: Ensuring that a segment of text is displayed correctly in a different writing direction than the surrounding content.
Correcting rendering issues: Fixing cases where text direction is misinterpreted by the browser due to mixed languages.
Special layout effects: Creating visual styles or reversing text flow for design purposes.

Overall, <bdo> is a small but powerful tool for web developers dealing with internationalization, text alignment, and bidirectional content presentation.

Properties

Permitted Parents: Any element that accepts phrasing content
Content: Inline and text
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<bdo dir="rtl">This text is going to be a bit difficult to read!</bdo>

Result

Editor

Attributes

dir

Specifies the text direction for the content in an element.
Possible Values:

rtl (Right to Left)
ltr (Left to Right)

Global Attributes

The <a> tag also supports the Global Attributes in HTML5

Event Attributes

The <a> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <bdo> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.