HTML - <bdo> Tag

The HTML <bdo> tag stands for Bi-Directional Override. This element overrides the current text directionality, causing the text to be shown in a new direction.

This <bdo> tag includes global attributes, one of which is dir, which is the direction in which the text should be rendered in this element’s contents.

Following is the possible values of the dir attribute −

  • ltr − Indicates that the text should go in a left-to-right direction.
  • rtl − Indicates that the text should go in a right-to-left direction.

Syntax

Following is the syntax of <bdo> tag −

<bdo dir="..">...</bdo>

Example

In the following example, we are creating an HTML document to see the workings of the <bdo> tag as follows −

<!DOCTYPE html>
<html>
<body>
   <h1>The bdo tag</h1>
   <p>This paragraph will go left-to-right. </p>
   <p>
      <bdo>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </bdo>
   </p>
 </body>
</html>

On running of the above code, we get the paragraph in the left-to-right direction because, by default, the <bdo> tag displays its content in the left-to-right direction.

Example

Considering the following example, we are using the <bdo> tag and its attribute "dir" and mention the dir value "ltr", as follows −

<!DOCTYPE html>
<html>
<body>
   <h1>The bdo tag</h1>
   <p>This paragraph will go left-to-right.</p>
   <p>
      <bdo dir="ltr">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</bdo>
   </p>
 </body>
</html>

When we run the above code, it will generate an output consisting of the texd displayed on the webpage.

Example

Let's look at the following example, where we are creating an HTML document and using the <bdo> tag and its attribute, as well as the CSS properties to style the bdo’s content, as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      bdo {
      color: green;
      font-style: italic;
      }
   </style>
</head>
<body>
   <h1>The bdo tag</h1>
   <p>This paragraph will go right-to-left.</p>
   <p>
      <bdo dir="rtl">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</bdo>
   </p>
 </body>
</html>

On running the above code, the output window will pop up displaying the direction of para from right to left on the webpage.

html_tags_reference.htm
Advertisements