Overriding Text Direction with the HTML `` Element: Handling Bidirectional Text

Learn how to use the HTML `` (Bidirectional Override) element to force a specific text direction, overriding the browser's default settings. This tutorial explains its `dir` attribute, its use in handling bidirectional text (mixing left-to-right and right-to-left scripts), and browser compatibility.

Overriding Text Direction with the HTML `` Element

Understanding the `` Element

The HTML `` (Bidirectional Override) element is used to force a specific direction for text rendering, overriding the browser's default directionality settings. This is particularly useful when working with bidirectional text (text that uses both left-to-right and right-to-left scripts, such as Arabic or Hebrew mixed with English). The `` tag is used to specify the directionality of the text within it explicitly, making it easier for the browser to render the text in the correct order. The `dir` attribute is required and is used to set the direction of text.

Using the `` Element

The `dir` attribute within the `` tag specifies the text direction. The possible values are:

• ltr: Left-to-right (default for most languages).
• rtl: Right-to-left (used for languages like Arabic and Hebrew).

<bdo dir="rtl">This text will be displayed right-to-left.</bdo>

Browser Support for ``

The `` element is well-supported by all major modern browsers.

Default Styling and CSS Customization

Most browsers use the `unicode-bidi: bidi-override;` property by default to handle bidirectional text within the `` element. You can customize the styling of the `` element using CSS, but this would typically only affect the font style. The directionality of the text is handled at a lower level within the browser.

bdo {
  unicode-bidi: bidi-override;
}