bdi 和 bdo 元素

Unicode 双向算法通常可以很好地处理混合方向文本，但有时仍需要覆盖它——例如隔离用户提供的姓名，防止其改变周围文本的方向，或在代码块中强制使用特定方向。

<bdi>（双向隔离）会将其内容视为独立的双向上下文。<bdi> 内部文本的方向不会影响外部文本的方向，反之亦然。

混合显示英文和阿拉伯文姓名的用户列表，可能会让阿拉伯文姓名的 RTL 流向“泄漏”到周围文本中。将每个姓名包裹在 <bdi> 中即可将其隔离：无论每个姓名实际使用何种方向，布局都能保持一致。

<bdo dir="rtl">（双向覆盖）会强制其内容使用特定方向，覆盖自然的双向解析结果。当您希望以非自然方向显示文本时可以使用它——例如，在 RTL 页面中以 LTR 渲染代码片段。

普通元素上的 dir 属性会设置基本方向，但双向算法仍会在其中应用。<bdo> 会关闭其内容的双向算法——每个字符都会严格按照指定方向排列，不论其所属文字系统的自然方向是什么。

每当您将用户生成的文本嵌入周围界面时都应使用它，例如聊天标题中的姓名、评论中的用户名以及信息流条目中的标题。隔离可以确保界面布局不受用户输入内容的方向影响。

很少使用。其主要的合理用途是讲解双向文本（展示字符串反转后的样子），或修正标签错误的数据，因为自然的双向文本解析会产生错误的视觉顺序。

对于方向未知的用户内容，请结合使用 <bdi dir="auto"> 来实现双重保护：自动检测会根据内容选择基础方向，而 bdi 会阻止该方向泄漏到周围文本中。

bdi 和 bdo 得到所有现代浏览器的支持。它们是 HTML5 的一部分，多年来一直很稳定。较旧版本的 IE 不支持 bdi，但这些版本实际上已经过时；现代网站可以放心使用 bdi。

屏幕阅读器会遵循双向文本隔离：<bdi> 内的文本会使用其自身语言的语音播报（设置了 lang 时），不会受到周围上下文的干扰。bdi 还有助于文字转语音在隔离短语的前后生成适当的停顿。

包含占位符（"欢迎，{name}"）的模板应将占位符包裹在 <bdi> 中：Welcome, <bdi>{name}</bdi>。无论用户名是英语、阿拉伯语还是混合内容，都能正确渲染，而不会干扰问候语的其余部分。

与 的实际区别是什么？

bdi 会隔离某个部分的文本方向，使其不影响周围内容——适合用于模板中的姓名等嵌入式用户内容。bdo 会强制指定方向，覆盖双向文本规则；除了教学示例外，很少需要使用。将 bdi 与 dir="auto" 结合，可安全处理语言未知的用户提供文本。