<bdi>

版本：HTML5

<bdi>标签允许您设置一段文本，使其脱离其父元素的文本方向设置。在双向文字中加入方向片段，使得该片段脱离其父元素的全局方向。

浏览器支持

目前只有 Firefox 和 Chrome 浏览器支持<bdi>标签。

示例

<p>this arabic word <bdi>arabic_placeholder </bdi> 6 is automatically displayed right-to-left.</p>

结果

BIDI双向文字

双向文字就是一个字符串中包含了两种文字，既包含从左到右的文字又包含从右到左的文字。大多数文字都是从左到右的书写习惯，比如拉丁文字（英文字母）和汉字，少数文字是从右到左的书写方式比如阿拉伯文（ar）跟希伯来文（he）。对于需要国际化支持的web应用来说，由于阅读习惯的不同在web页面排版和布局中会给开发人员带来麻烦。这种情况多数出现在从右到左的文字中，比如字符串中出现阿拉伯文、英文字母、数字以及标点符号。

中文是从左到右书写阅读的，中国古代却是从右到左的，阿拉伯文字从右到左，拉丁文字和西里尔文字从左到右，阿塞拜疆语可以同时使用这些文字，那么在电脑里就要有控制顺序的方法啦，底层这个方法就是 bidi算法了又叫Unicode双向算法

Unicode 双向算法（Unicode Bidirectional Algorithm），在后面的文章中我们将 Unicode 双向算法简称为 bidi 算法。该算法用来确认双向文字显示时的方向性。当然，除了方向性，该算法还涉及字形变化（Shaping）和镜像分析（Mirroring）等等其它和 bidi 相关的特性，不过这部分特性的实现大多由底层应用所控制，无需 Web 工程师进行设定或干预。

双向字符类型

写方向是和文字相关，阿拉伯文字从右到左，拉丁文字从左到右。当人们在纸上书写时当然会记得这些规则，那计算机是如何知道的呢？实际上，Unicode 定义了它其中每个字符的方向属性，计算机就是根据这个方向属性来判断该文字的方向。

Unicode 方向属性包含三种类型：强字符、弱字符和中性字符。在这三种主要类型下面还有很多细小的属性分类。大部分的字符都属于强字符，比如英文字母、汉字和阿拉伯字母。它们的方向性是确定的，从左到右或者从右到左，和其上下文的 bidi 属性无关。并且，强字符在 bidi 算法中可能会影响其前后字符的方向性。中性字符的方向性是不确定的，由上下文的 bidi 属性来决定其方向，比如大部分的标点符号和空格。有意思的是弱字符的特性，它们的方向是确定的，但对其前后字符的方向性并不会产生影响。数字和数字相关的一些符号就属于弱字符。

大部分情况，Unicode 双向算法能根据字符属性和全局方向等信息运算并正确地显示双向文字，这是该算法的隐性模式。在这种模式下，双向文字的显示方式基本上由算法完成，不需要人为的干预。但是，隐性模式的算法在处理复杂情况的双向文字时会显得不足，这时就可以使用显性模式来进行补充。在显性模式的算法中，除了隐性算法的运算外，可以在双向文字中加入关于方向的 Unicode 控制字符来控制文字的显示。这些被加入文字中的 Unicode 控制字符在显示界面上是不可见的，也不占用任何显示空间。它们只是在默默地影响着双向文字的显示。

隐性模式的算法在处理复杂情况的双向文字时会显得不足，这时就可以使用显模式来进行补充。

dir属性

与 LRE 控制字符和 RLE 控制字符相对应的 HTML 元素是dir ="ltr"和dir ="rtl"（ltr 的英文全称为 left to right，而 rtl 的英文全称为 right to left）这两个属性，它们就像其他的属性一样，可以被用在块级元素或内联元素中，并控制该区域的方向性。属性 dir 这个关键字就是英文单词 direction （方向）的缩写。实际上，这个属性控制的就是相应元素内的全局方向。

HTML5 中给dir属性加入了一个新的值“auto”。这个值与上面提到的 ltr 和 rtl 不同，它并不明确相应元素内的全局方向，而需要根据不同的情况进行判断。这个判断依据就是该元素内的第一个强字符。如果第一个强字符是从左到右的属性，那么 dir="auto"的结果就等于 dir="ltr"。同理，如果第一个强字符是从右到左的属性，那么dir="auto"的结果就等于dir="rtl"。需要注意的是，这里的判断条件的第一个强字符，而会忽略之前遇到的弱字符和中性字符。这种模式可以被称为自动方向性或者上下文方向性。

标签<bdo>

而与 LRO 控制字符和 RLO 控制字符相对应的 HTML 元素分别为：

<bdo dir = "rtl"></bdo>
<bdo dir = "ltr"></bdo>

其中，<bdo dir ="rtl">和<bdo dir ="ltr">相当于 LRO 控制字符和 RLO 控制字符，表示一段控制区域的开始。而</bdo>的作用就像是 PDF 控制字符，表示此控制区域的结束。该标签根据 dir 属性覆盖相应元素内的字符方向性。关键字 bdo 的英文全称为 bidirectional override （双向性超控）。需要注意的是，在这个标签中的 dir 属性不能赋值为 auto。

标签定义及使用说明

• bdi 指的是 bidi 隔离（Bi-directional Isolation）。<bdi>标签允许您设置一段文本，使其脱离其父元素的文本方向设置。在双向文字中加入方向片段，使得该片段脱离其父元素的全局方向。
• <bdi>标签本身带有默认方向属性。<bdi>标签中可以使用 dir 属性来指定方向性，但默认情况下该属性的值为 auto。也就是说，使用<bdi>...</bdi>的结果和使用<bdi dir="auto">...</bdi>是一样的。
• 在发布用户评论或其他您无法完全控制的内容时，该标签很有用。
• 尽管同样的显示效果可以通过使用CSS规则unicode-bidi设置，但语义信息只能通过<bdi>元素传递。特别是，当浏览器允许忽略CSS样式时，在这种情况下，使用<bdi>仍然可以保证文本正确显示，而使用CSS样式来传递语义时就显得毫无用处。

HTML 4.01 与 HTML5之间的差异

<bdi>标签是 HTML5 的新标签。

属性

dir如同其他HTML元素一样，它包含全局属性，但是有一些语义上的细微差别：dir属性不继承父元素。如果没有设置，默认值即为auto，以便浏览器根据元素内容决定元素内容的方向。

• dir="ltr"方向从左到右。
• dir="rlt"方向从到右左。
• dir="auto"默认值。

全局属性

<bdi>标签支持HTML 的全局属性。

事件属性

<bdi>标签支持HTML 的事件属性。

实例

将用户名从周围的文本方向设置中隔离出来：

<ul>
<li>user <bdi>hrefs</bdi>: 60 points</li>
<li>user <bdi>jdoe</bdi>: 80 points</li>
<li>user <bdi>إيان</bdi>: 90 points</li>
</ul>

<ul>
<li>Username <bdi>Bill</bdi> 80 points</li>
<li>Username <bdi>Steve</bdi> 78 points</li>
</ul>

User <bdi dir="rtl">my home</bdi> 60