<bdo>: The Bidirectional Text Override element
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The <bdo> HTML element overrides the current directionality of text, so that the text within is rendered in a different direction.
Try it
<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>
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
<!-- 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
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
| Content categories | Flow content, phrasing content, palpable content. |
|---|---|
| Permitted content | Phrasing content. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts phrasing content. |
| Implicit ARIA role |
generic
|
| Permitted ARIA roles | Any |
| DOM interface |
HTMLElement Up to Gecko 1.9.2 (Firefox 4)
inclusive, Firefox implements the
HTMLSpanElement
interface for this element.
|
Specifications
| Specification |
|---|
| HTML> # the-bdo-element> |
Browser compatibility
Loading…
See also
- Related HTML element:
<bdi>