<bdo>: 双向文本覆盖元素

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

<bdo> 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>
html {
  font-family: sans-serif;
}

bdo {
  /* Add your styles here */
}

文本的字符会从给定方向的起始点绘制;单个字符的方向不受影响(例如,字符不会被反向绘制)。

属性

此元素的属性包括全局属性

dir

此元素内容中文本应渲染的方向。可能的值为:

  • ltr: 表示文本应从左到右显示。
  • rtl: 表示文本应从右到左显示。

示例

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>

结果

注意

HTML 4 规范未为该元素指定事件;这些事件是在 XHTML 中添加的。这很可能是一个疏忽。

技术摘要

内容类别 流式内容语句内容、明显内容。
允许内容 短语内容.
标签省略 无,起始标签和结束标签都必须存在。
允许父级 任何接受短语内容的元素。
隐式 ARIA 角色 generic
允许的 ARIA 角色 任意
DOM 接口 HTMLElement 直到 Gecko 1.9.2(Firefox 4)为止,Firefox 都为该元素实现了 HTMLSpanElement 接口。

规范

规范
HTML
# the-bdo-element

浏览器兼容性

另见

  • 相关 HTML 元素:<bdi>