ContextQMD
Back to Content

: The Bidirectional Text Override element

files/en-us/web/html/reference/elements/bdo/index.md

latest3.5 KB
Original Source

The <bdo> HTML element overrides the current directionality of text, so that the text within is rendered in a different direction.

{{InteractiveExample("HTML Demo: <bdo>", "tabbed-standard")}}

html
<h1>Famous seaside songs</h1>

<p>The English song "Oh I do like to be beside the seaside"</p>

<p>
  Looks like this in Hebrew:
  <span dir="rtl">אה, אני אוהב להיות ליד חוף הים</span>
</p>

<p>
  In the computer's memory, this is stored as
  <bdo dir="ltr">אה, אני אוהב להיות ליד חוף הים</bdo>
</p>
css
html {
  font-family: sans-serif;
}

bdo {
  /* Add your styles here */
}

The text's characters are drawn from the starting point in the given direction; the individual characters' orientation is not affected (so characters don't get drawn backward, for example).

Attributes

This element's attributes include the global attributes.

  • dir
    • : The direction in which text should be rendered in this element's contents. Possible values are:
      • 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.

Examples

html
<!-- Switch text direction -->
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>

Result

{{EmbedLiveSample('Examples')}}

Notes

The HTML 4 specification did not specify events for this element; they were added in XHTML. This is most likely an oversight.

Technical summary

<table class="properties"> <tbody> <tr> <th scope="row"> <a href="/en-US/docs/Web/HTML/Guides/Content_categories" >Content categories</a > </th> <td> <a href="/en-US/docs/Web/HTML/Guides/Content_categories#flow_content" >Flow content</a >, <a href="/en-US/docs/Web/HTML/Guides/Content_categories#phrasing_content" >phrasing content</a >, palpable content. </td> </tr> <tr> <th scope="row">Permitted content</th> <td> <a href="/en-US/docs/Web/HTML/Guides/Content_categories#phrasing_content" >Phrasing content</a >. </td> </tr> <tr> <th scope="row">Tag omission</th> <td>None, both the starting and ending tag are mandatory.</td> </tr> <tr> <th scope="row">Permitted parents</th> <td> Any element that accepts <a href="/en-US/docs/Web/HTML/Guides/Content_categories#phrasing_content" >phrasing content</a >. </td> </tr> <tr> <th scope="row">Implicit ARIA role</th> <td> <code ><a href="/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/generic_role" >generic</a ></code > </td> </tr> <tr> <th scope="row">Permitted ARIA roles</th> <td>Any</td> </tr> <tr> <th scope="row">DOM interface</th> <td> {{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <code ><a href="/en-US/docs/Web/API/HTMLSpanElement" >HTMLSpanElement</a ></code > interface for this element. </td> </tr> </tbody> </table>

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

  • Related HTML element: {{HTMLElement("bdi")}}