HTML <bdo> Tag

The HTML <bdo> (Bi-Directional Override) tag is used to override the current text direction. It allows you to force the direction of text to be either left-to-right (LTR) or right-to-left (RTL), regardless of the surrounding text directionality.

The <bdo> tag is particularly useful when dealing with languages that have conflicting text direction or when embedding text from different languages within the same document.

Attributes of HTML <bdo> Tag

  • dir: Specifies the text direction. Possible values are:
    • ltr: Left-to-right direction.
    • rtl: Right-to-left direction.

Basic Example of HTML <bdo> Tag

Here’s an example demonstrating how the <bdo> tag is used to override text direction:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>BDO Tag Example</h2>
        <p>Normal text direction:</p>
        <p>This is an example text.</p>

        <p>Reversed text direction:</p>
        <p><bdo dir="rtl">This is an example text.</bdo></p>
    </body>
</html>
Basic Example of HTML <bdo> Tag

Explanation: The <bdo dir="rtl"> forces the text to display from right to left, overriding the default left-to-right direction.

Special Cases for HTML <bdo> Tag

1. Embedding RTL Text in LTR Context

When embedding a phrase in Arabic (RTL) within English (LTR), the <bdo> tag can correct directionality issues:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Embedding RTL Text</h2>
        <p>Here is an Arabic name: <bdo dir="rtl">علي</bdo> displayed in an English sentence.</p>
    </body>
</html>

Explanation: The <bdo dir="rtl"> ensures the Arabic text is displayed in its correct right-to-left direction without affecting the surrounding English content.

2. Reversing LTR Text in RTL Context

Similarly, you can force LTR text within an RTL document:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body dir="rtl">
        <h2>Reversing LTR Text</h2>
        <p>Here is an English word: <bdo dir="ltr">Example</bdo> displayed in a right-to-left document.</p>
    </body>
</html>
Reversing LTR Text in RTL Context using bdo tag

Explanation: The <bdo dir="ltr"> forces the English word to display in its correct left-to-right order, even within an RTL environment.

3. Example Using CSS with <bdo> Tag

You can style the <bdo> tag with CSS for better visual distinction:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            bdo {
                color: red;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h2>Styled BDO Example</h2>
        <p>This is a <bdo dir="rtl">styled text</bdo> displayed in reverse direction.</p>
    </body>
</html>
Example Using CSS with <bdo> Tag

Result: The text inside the <bdo> tag is styled with bold red text while maintaining its overridden direction.