<bdo>: The Bidirectional Text Override element #

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

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <bdo> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-standard .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

Famous seaside songs

<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-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} html { font-family: sans-serif; }

/* stylelint-disable-next-line block-no-empty */
bdo {
}

::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: :::

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 #

::: section-content 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 #

::: section-content ::: code-example [html]{.language-name}

<!-- 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 #

::: section-content ::: {#sect1 .code-example} ::: iframe ::: ::: :::

Notes #

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

Technical summary #

::: section-content

Specifications #

::: _table #

Specification #

HTML Standard
[# the-bdo-element]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

      Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

bdo ≤15 12 10 Yes ≤15 ≤4 4.4 18 10 14 ≤3.2 1.0 :::

See also #

::: section-content

• Related HTML element: <bdi> :::

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdo{._attribution-link} :::