关于方向的HTML元素

关于方向的HTML元素

一、前言

在HTML中除了可以使用那些关于方向的Unicode控制字符，还可以使用HTML中提供的标签或者属性来控制双向文字的显示。而且，当可以使用标签或者属性时，建议使用这些HTML元素来控制方向，而不使用Unicode控制字符。最主要的原因是Unicode控制字符是不可见的，在使用和维护时容易出现问题，而HTML元素可以避免这个问题。

二、属性 dir

与LRE控制字符和RLE控制字符相对应的HTML元素是dir="ltr"和dir="rtl"这两个属性，它们就像其他的属性一样，可以被用在块级元素或内联元素中，并控制该区域的方向属性。属性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属性覆盖相应元素内的字符方向性。需要注意的是，在这个标签中的dir属性不能赋值为`auto。

四、标签 bdi

HTML5还加入了一个新的元素，那就是标签<bdi>，该标签用来在双向文字中加入方向片段，使得该片段脱离其父元素的全局方向。有点类似于<span>标签的作用，但不同的是<bdi>标签本身带有默认方向属性。

<bdi>标签中可以使用dir属性来指定方向性，但默认情况下该属性的值为auto。也就是说，使用<bdi>...</bdi>的结果和使用<bdi dir="auto">...</bdi>是一样的。

当无法预知要显示内容的方向性时，建议使用此标签，让该区域根据上下文来判断优先使用的方向。但是在<input>标签外使用该标签无效，可以使用<input dir="auto">代替。

五、关于方向的HTML实体

还需要说明的是，隐性双向控制字符LRM和RLM并没有与之相对应的 HTML元素，不过建议使用HTML实体来代替Unicode控制字符。至少在编辑器中，这些HTML实体是可见的。

六、HTML实现bidi支持的例子

我们将在这个部分介绍一些HTML中关于bidi支持的简单例子。但实际情况往往更为复杂，需要考虑的方向性问题更多。比如，在方向串的边界处出现弱字符或者中性字符时常常会出现显示顺序的问题，需要用到HTML方向元素。

6.1 覆盖字符原有的双向属性

这里需要使用到<bdo>标签，在某些特殊的情况下改变原本的字符双向属性。比如在下面的例子中，使用大写英文字母来代替阿拉伯字符，但默认情况下大写英文字符的方向是从左到右的，这时就可以用<bdo>覆盖它。

• 正常大写英文字母

<p>APPLE</p>