The HTML `` element stands for **Bi-Directional Override**. It is a specialized inline text formatting element used to explicitly override the current directionality of text, forcing it to render in a specific direction (either left-to-right or right-to-left), regardless of the browser's default text rendering algorithms. ### Why is it used? Web browsers use a complex algorithm (the Unicode Bidirectional Algorithm) to automatically handle mixed-direction text—such as displaying English (left-to-right, or LTR) alongside Arabic or Hebrew (right-to-left, or RTL). However, there are scenarios where the automatic algorithm fails or where you need to deliberately reverse the rendering order of characters (for example, displaying a reversed string for cryptographic keys, part numbers, or specific linguistic studies). The `` tag gives developers absolute control to force a specific visual direction. --- ## Syntax and Attributes The `` tag is an inline element and requires both an opening tag (``) and a closing tag (``). To function correctly, the `` element **must** include the `dir` attribute. Without it, the tag has no effect. ### Attributes | Attribute | Value | Description | Requirement | | :--- | :--- | :--- | :--- | | `dir` | `ltr` | Forces the text inside the tag to render **Left-to-Right**. | **Required** | | `dir` | `rtl` | Forces the text inside the tag to render **Right-to-Left**. | **Required** | | *Global Attributes* | *Various* | Supports all standard HTML global attributes (e.g., `class`, `id`, `style`, `lang`). | Optional | ### Basic Syntax ```html This text will be rendered from right to left. ``` --- ## Code Example Below is a complete, self-contained HTML example demonstrating how the `` tag behaves compared to standard text. It includes both Left-to-Right (LTR) and Right-to-Left (RTL) overrides, along with minimal CSS for clear visual presentation. ```html HTML bdo Tag Demonstration

The <bdo> Element in Action

Standard Text (Default LTR):

This is a normal English sentence.

Right-to-Left Override (dir="rtl"):

This is a normal English sentence.

Inside an RTL Container (Forced LTR with dir="ltr"):

123-456-7890 (Phone Number)

``` --- ## Best Practices and Common Pitfalls ### 1. Always Include the `dir` Attribute The `` tag does not have a default directional behavior. If you omit the `dir` attribute, the browser will render the text normally, rendering the tag completely useless. * **Incorrect:** ` Text ` * **Correct:** ` Text ` ### 2. Do Not Confuse `` with `` A common mistake is confusing `` (Bi-Directional Override) with `` (Bi-Directional Isolation). * Use **``** when you want to **force** a specific direction and completely override the default Unicode bidirectional algorithm. * Use **``** when you are inserting user-generated content (like usernames or database outputs) where the direction is unknown, and you want to **isolate** it so it doesn't mess up the surrounding page layout. ### 3. Accessibility (a11y) Considerations Screen readers read text in the logical order of the language, but `` physically reverses the character rendering order for visual display. If you use `` on English text, a screen reader may attempt to read the word backward (e.g., pronouncing "cat" as "tac"), or read it letter-by-letter. * **Tip:** Only use `` when it is semantically and linguistically appropriate. Avoid using it purely for "cool" visual text-reversal effects, as this severely breaks accessibility for visually impaired users.

YouTip

Tag Bdo

The <bdo> Element in Action

📂 Categories