files/zh-cn/web/html/element/bdo/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

---
title: '<bdo>: 双向文本替代元素'
slug: Web/HTML/Element/bdo
translation_of: Web/HTML/Element/bdo
---
<div>{{HTMLRef}}</div>

<div></div>

<p><span class="seoSummary">HTML 双向文本替代元素 (<strong><code>&lt;bdo&gt;</code></strong>) 改写了文本的方向性，</span>使文本以不同的方向渲染呈现出来<span class="seoSummary">(override 可以翻译很多意思，编程语言中多用覆盖，重载；这里采用了 Google 的整体翻译，取替代替换改写之意)</span></p>

<div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</div>


<p>文本的字符是从给定方向的起始点绘制的; 各个字符的方向不受影响 (因此字符集不会向后拉， 例如).</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">内容分类</th>
   <td><a href="zh-CN/docs/Web/Guide/HTML/Content_categories">流式元素</a>, <a href="zh-CN/docs/Web/Guide/HTML/Content_categories">短语元素</a>, 显式元素。</td>
  </tr>
  <tr>
   <th scope="row">许可内容</th>
   <td><a href="zh-CN/docs/Web/Guide/HTML/Content_categories">短语元素</a>.</td>
  </tr>
  <tr>
   <th scope="row">标记省略</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">许可父级元素</th>
   <td>接受<a href="zh-CN/docs/Web/Guide/HTML/Content_categories">短语元素</a>的任何元素</td>
  </tr>
  <tr>
   <th scope="row">隐式 ARIA 角色</th>
   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td>
  </tr>
  <tr>
   <th scope="row">许可 ARIA 角色</th>
   <td>任何</td>
  </tr>
  <tr>
   <th scope="row">DOM 接口</th>
   <td>{{domxref("HTMLElement")}}直到 Gecko 1.9.2 (包括 Firefox 4) 为止，Firefox 均为此元素实现 HTMLSpanElement 接口。</td>
  </tr>
 </tbody>
</table>

<h2 id="属性">属性</h2>

<p>元素属性包含<a href="/zh-CN/docs/Web/HTML/Global_attributes">全局属性</a></p>

<dl>
 <dt>{{htmlattrdef("dir")}}</dt>
 <dd>
 <p>    在此元素内容中呈现文本的方向。可能的值是：</p>

 <ul>
  <li>ltr: 指示文本应从左到右的方向。</li>
  <li>rtl: 指示文本应从右到左的方向。</li>
 </ul>
 </dd>
</dl>

<h2 id="示例">示例</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="结果">结果</h3>

<p>{{EmbedLiveSample('Examples')}}</p>

<h2 id="注意">注意</h2>

<p>HTML 4 规范未指定此元素的事件。 它们是在 XHTML 中添加的。 这很可能是疏忽。</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-bdo-element', '&lt;bdo&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '&lt;bdo&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>


<p>{{Compat("html.elements.bdo")}}</p>

<h2 dir="ltr" id="另参见">另参见</h2>

<ul>
 <li>相关 HTML: {{HTMLElement("bdi")}}</li>
</ul>