The <bdo> tag stands for Bi-Directional Override. It is used to override the current text direction. This is useful when the browser gets the directionality wrong, or for specific visual effects.

Step 2: Video

Normally, text renders left-to-right (LTR). Let's start with a standard paragraph. Watch how the text appears normally.

<p>This is normal text.</p>

Step 3: Video

Now, let's use the <bdo> tag. To make it work, we MUST add the 'dir' attribute (direction). Setting dir='rtl' (right-to-left) forces the text to be mirrored.

<p>This is <bdo dir="rtl">reversed</bdo> text.</p>

Step 4: Video

This is the result in the browser. The word 'reversed' now appears as 'desrever'. The <bdo> tag physically swaps the character order for display.

<p>This is <bdo dir="rtl">reversed</bdo> text.</p>

Step 5: Exercise

Checkpoint: Identify the attribute used to change direction.

<p>This is <bdo dir="rtl">reversed</bdo> text.</p>

Step 6: Video

You can also use dir='ltr' to force left-to-right inside a right-to-left block. Remember, <bdo> should be used sparingly, mostly when you need to force visual mirroring.

<p>Force <bdo dir="ltr">Left To Right</bdo></p>

Step 7: Video

Now it's your turn. Practice using the <bdo> tag and the 'dir' attribute in the challenges below. Good luck!

bdo.html

1 / 7

🔄

Tutor:The <bdo> tag stands for Bi-Directional Override. It is used to override the current text direction. This is useful when the browser gets the directionality wrong, or for specific visual effects.

⭐ 0 EXP

Direction Mastery

Unlock nodes by learning bidirectional overrides.

Concept 1: Bi-Directional Override

The <bdo> tag overrides the current directionality of text. It essentially flips the text rendering.

System Check

What does BDO stand for?

Big Data ObjectBi-Directional OverrideBold Direction OptionBasic Document Orientation

Community Holo-Net

Showcase Your Overrides

Found a creative use for reversed text? Share your BDO examples.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

What is the HTML BDO Tag?

Pascual Vila

Frontend Instructor

The HTML <bdo> tag (Bi-Directional Override) is a semantic element designed strictly to override the default text directionality of a web page. It prevents the browser's automatic bidirectional algorithm from taking effect and strictly enforces a specific reading direction.

The Required 'dir' Attribute

The bdo element must include the dir attribute to execute its overriding function. The acceptable values are:

dir="rtl"Forces rendering from Right-To-Left (mirrors standard text).
dir="ltr"Forces rendering from Left-To-Right (standard in Western languages).

When and Why to Use It

You should implement the BDO tag exclusively when the inherent directionality of your content conflicts with the surrounding text structure, causing visual distortion. It's often required in internationalization scenarios or specific stylistic mirroring. For isolated text insertion without overriding algorithms, developers generally prefer the <bdi> tag.

Terminology & Reference

BDO: Bi-Directional Override. HTML tag employed to dictate manual text direction.
RTL: Right-To-Left. The direction paradigm critical for displaying languages like Arabic, Hebrew, and Persian.
LTR: Left-To-Right. The default text direction configuration for Western languages like English and Spanish.

📖 INDEX