The
<bdo>tag stands for Bi-Directional Override and is used to override the current text direction of its content.
It’s mainly helpful for displaying text in languages that are written from right to left (RTL), such as Arabic or Hebrew, or for testing direction behavior.
You must use thedirattribute to specify the direction — eitherltr(left-to-right) orrtl(right-to-left).
Syntax
<bdo dir="rtl">Text to display in reverse direction</bdo>Attributes
| Attribute | Description |
|---|---|
dir | Required. Specifies the text direction: ltr (left-to-right) or rtl (right-to-left). |
class | Adds one or more class names for CSS styling. |
id | Assigns a unique identifier to the element. |
style | Defines inline CSS styles. |
title | Displays additional information on hover. |
Example
<!DOCTYPE html>
<html>
<head>
<title>BDO Tag Example</title>
<style>
bdo {
background-color: #f0f0f0;
padding: 5px 8px;
border-radius: 5px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>HTML <bdo> Tag Example</h1>
<p>Normal text direction:</p>
<p>Hello World!</p>
<p>Text direction reversed using <code><bdo dir="rtl"></code>:</p>
<p>
<bdo dir="rtl" id="reverse-text" class="highlight" style="color:#29AB87;">Hello World!</bdo>
</p>
<p>
Another example with <code>dir="ltr"</code> (default left to right):
<bdo dir="ltr" title="Left to Right Direction">HTML5 & CSS3</bdo>
</p>
</body>
</html>Output
Browser Output
Use our TryIt Editor to see the output.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
The <bdo dir="rtl"> element reverses the display direction of the text inside it.
“Hello World!” will appear from right to left instead of the default left-to-right.
Notes
- The
dirattribute is mandatory for the<bdo>tag to function. - Commonly used to override inherited text direction in multilingual websites.
- It can be styled with CSS for visual clarity or emphasis.
- Use
<bdi>instead if you need the browser to automatically determine text direction.
Conclusion
The <bdo> tag is a powerful tool for controlling text direction manually, ensuring correct display of multilingual content.
It’s particularly useful in applications involving RTL languages or testing text rendering direction.
