PHP小码农

Appearance

bdi 与 bdo 文本方向 ​

<bdi> 和 <bdo> 用于处理双向文本（Bi-Directional Text）。<bdi> 用于隔离双向文本，防止周围的文本方向影响内部内容；<bdo> 用于显式覆盖文本的显示方向。

前置知识

阅读本节前，建议先了解：ruby 注音

基础概念 ​

Web 页面中的文本通常是单向的（从左到右或从右到左）。但当页面中混合了不同方向的文本时（如阿拉伯语/希伯来语与中文/英文混合），浏览器会尝试根据 Unicode 双向算法自动判断文本方向，这可能导致显示问题。<bdi> 和 <bdo> 就是用来处理这类问题的。

bdi — 双向隔离 ​

<bdi>（Bi-Directional Isolation）将其内容与周围文本的双向方向隔离：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>bdi 示例</title>
</head>
<body>
  <p>用户 <bdi>إبراهيم</bdi> 提交了新的反馈。</p>
</body>
</html>

bdi 的典型场景 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>bdi 典型场景</title>
</head>
<body>
  <h1>用户评论列表</h1>
  <ul>
    <li><bdi>张三</bdi>：这个功能很好用。</li>
    <li><bdi>إبراهيم</bdi>: Great feature!</li>
    <li><bdi>יעקב</bdi>: מעולה!</li>
  </ul>
</body>
</html>

bdo — 文本方向覆盖 ​

<bdo>（Bi-Directional Override）用于显式指定文本的显示方向：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>bdo 示例</title>
</head>
<body>
  <p>从左到右：<bdo dir="ltr">Hello World</bdo></p>
  <p>从右到左：<bdo dir="rtl">Hello World</bdo></p>
</body>
</html>

bdo 的显示效果

<bdo dir="rtl">Hello World</bdo> 会显示为 "dlroW olleH"——字符顺序被完全反转。

bdi 与 bdo 的对比 ​

特性<bdi><bdo>
语义隔离方向，不改变内部方向强制覆盖文本显示方向
属性无需属性需要 dir 属性
使用场景混合语言环境中的用户输入特殊的文本方向展示

实战示例 ​

多语言用户列表 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>多语言用户列表</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; }
    .user-list { list-style: none; padding: 0; }
    .user-item { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #eee; }
  </style>
</head>
<body>
  <h1>最近活跃用户</h1>
  <ul class="user-list">
    <li class="user-item"><bdi>张三</bdi> <span>5 分钟前</span></li>
    <li class="user-item"><bdi>إبراهيم</bdi> <span>10 分钟前</span></li>
    <li class="user-item"><bdi>יוסי</bdi> <span>1 小时前</span></li>
  </ul>
</body>
</html>

注意事项 ​

  • <bdi> 主要用于用户生成内容（UGC）的场景
  • <bdo> 几乎只用于展示目的，使用频率较低
  • 页面整体方向切换应使用 <html dir="rtl"> 或 CSS direction

最佳实践 ​

  1. 用户名使用 bdi：防止不同方向的用户名影响页面布局
  2. 谨慎使用 bdo：只在确实需要反转文本方向时使用
  3. 整体方向用 CSS：页面整体方向用 dir 属性或 CSS direction

下一节

继续学习：span 通用行内容器

参考链接 ​