Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 492581 of <bdo>

  • Revision slug: Web/HTML/Element/bdo
  • Revision title: <bdo>
  • Revision id: 492581
  • Created:
  • Creator: kscarfone
  • Is current revision? No
  • Comment Changed {{HTML:Element-Navigation}} to {{HTMLRef}}

Revision Content

Summary

The HTML <bdo> Element (or HTML bidirectional override element) is used to override the current directionality of text. It causes the directionality of the characters to be ignored in favor of the specified directionality.

Usage Context

Attributes

This element includes the global attributes.

{{htmlattrdef("dir")}}
Text direction in this element. 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.
  • auto: The browser decides which direction based on the element's content.

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

This text will go left to right.

.tfel ot thgir og lliw txet sihT.

Notes

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

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdo-element', '<bdo>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'the-bdo-element.html#the-bdo-element', '<bdo>')}} {{Spec2('HTML5 W3C')}}  
{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}} {{Spec2('HTML4.01')}}  

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}}

{{HTMLRef}}

Revision Source

<h2 id="Summary">Summary</h2>
<p>The <strong>HTML <code>&lt;bdo&gt;</code> Element</strong> (or <em>HTML bidirectional override element</em>) is used to override the current directionality of text. It causes the directionality of the characters to be ignored in favor of the specified directionality.</p>
<h2 id="Usage_Context">Usage Context</h2>
<ul class="htmlelt">
 <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, palpable content.</li>
 <li><dfn>Permitted content</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</li>
 <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
 <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</li>
 <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the <a href="/en-US/docs/DOM/span" title="DOM/span"><span style="font-family: Courier New;">HTMLSpanElement</span></a> interface for this element.</li>
</ul>
<h2 id="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
<dl>
 <dt>
  {{htmlattrdef("dir")}}</dt>
 <dd>
  Text direction in this element. Possible values are:
  <ul>
   <li><code>ltr</code>: Indicates that the text should go in a left-to-right direction.</li>
   <li><code>rtl</code>: Indicates that the text should go in a right-to-left direction.</li>
   <li><code>auto</code>: The browser decides which direction based on the element's content.</li>
  </ul>
 </dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre class="brush: html">
&lt;!-- Switch text direction --&gt;
&lt;p&gt;This text will go left to right.&lt;/p&gt;
&lt;p&gt;&lt;bdo dir="rtl"&gt;This text will go right to left.&lt;/bdo&gt;&lt;/p&gt;</pre>
<h3 id="Result">Result</h3>
<p>This text will go left to right.</p>
<p>.tfel ot thgir og lliw txet sihT.</p>
<h2 id="Notes">Notes</h2>
<p>The HTML 4 specification did not specify events for this element; they were added in XHTML. This is most likely an oversight.</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'the-bdo-element.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '&lt;bdo&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari (WebKit)</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE&nbsp;Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<p>{{HTMLRef}}</p>
Revert to this revision