HTML宝典(第 1 版)
2.3.20 bdo和bdi元素
阅读(

HTML基础

HTML元素

结构语义元素

内容分组元素

文本语义元素

ins和del元素

sub和sup元素

kbd元素

samp元素

var元素

code元素

time元素

dfn元素

abbr元素

mark元素

cite元素

q元素

s元素

u元素

b元素

i元素

small元素

strong元素

文本元素

bdo和bdi元素

如果页面中混合了从左到右书写的文本(如,大多数语言所使用的拉丁字符)和从右到左书写的文本(如,阿拉伯或希伯来语字符),就可以使用 bdo元素和 bdi元素。

bdo元素用来覆盖默认的文本方向,方向由 dir属性指定,并将属性值设置为 ltr 或 rtl,ltr(即,left to right)表示从左到右书写,而 rtl(即,right to left)表示从右到左书写。如:

<p>APPLE</p>

由于默认情况下,拉丁字符是从左到右的书写方向。运行结果如图 2‑38所示:

正常的方向
图2-38 正常的方向

如果希望覆盖默认的书写方向,让这一块文本按从右到左的方向书写,就可以使用 bdo元素来包裹这一块文本,并将 dir属性设置为rtl:

<p><bdo dir="rtl">APPLE</bdo></p>

运行结果如图 2‑39 所示:

覆盖后的方向
图2-39 覆盖后的方向

当确知文本的书写方向时,使用 bdo元素就非常方便。但有时候,并不能确定文本的书写方向,这时就得使用 bdi元素。

bdi元素用于定义一块文本,使其脱离其父元素的文本方向设置,在无法预知某些文本的书写方向时,让浏览器来自动判断,并使用正确的文本书写方向。

假设要展示每个用户发帖数,用户名的信息是从数据库获取的,而用户来自世界各地,就无法准确知道用户名的书写方向。这时,就要将用户名放 bdi元素中。如:

<ul>
    <li>User <bdi>jcranmer</bdi>: 12 posts.
    <li>User <bdi>hober</bdi>: 5 posts.
    <li>User <bdi>إيان</bdi>: 3 posts.
</ul>

运行结果如图 2‑40 所示:

使用bdi元素
图2-40 使用bdi元素

由于阿拉伯文的书写方向是从右到左,如果不使用 bdi元素,双向算法就会把冒号和数字3放在“User”的旁边,而不是“posts”的旁边,阿拉伯文的用户名就会使文本变得难以理解。运行结果如图 2‑41 所示:

不使用bdi元素
图2-41 不使用bdi元素

由此可知,如果在某个上下文中,文本的内容是自动生成的,却又不知道某些文本的书写方向时,bdi元素就特别有用。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验