HTML元素控制双向文字显示-CSDN博客

本文链接：https://blog.csdn.net/qq_40834030/article/details/106264565

本文介绍了HTML中用于控制双向文字显示的元素和属性，包括`dir`属性、`bdo`标签、`bdi`标签及其使用示例，强调在可以使用HTML元素时应避免使用Unicode控制字符。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于方向的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>

在这里插入图片描述

覆盖方向属性后的字符

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

在这里插入图片描述
改变字符方向属性后，此区域内的英文字母排列顺序也变成从右到左了。

6.2 HTML元素内方向的指定

当HTML文件中没有使用任何的dir属性，那么方向会默认为从左到右。

将dir指定为ltr

<bdi dir="ltr">The apple is called <bdo dir="rtl">APPLE</bdo> in Arabic.</bdi>
<bdi dir="ltr">The apple is called تفاحة in Arabic.</bdi>

在这里插入图片描述

将dir指定为rtl

<bdi dir="rtl">The apple is called <bdo dir="rtl">APPLE</bdo> in Arabic.</bdi>
<bdi dir="rtl">The apple is called تفاحة in Arabic.</bdi>

在这里插入图片描述

将dir指定为auto

因为句子中的第一个强字符的方向性是LTR，所以效果与dir="ltr"相同。

6.3 修正方向性

比如下面的代码：

<p>These fruits are called <bdo dir="rtl">APPLE</bdo>, <bdo dir="rtl">PEAR</bdo> and <bdo dir="rtl">ORANGE</bdo> in Arabic.</p>

我们期望看到的显示结果为：

在这里插入图片描述
但实际上这个句子显示出来后，会是这样的结果：

在这里插入图片描述
因为ELPPA和RAEP之间是中性字符逗号和空格，那么ELPPA、RAEP、逗号以及空格会被作为一个方向串来处理。想要让这个句子按照期望的方式来显示，有两种修正方式。

使用HTML实体将这个方向串从中截断。

<p >These fruits are called <bdo dir="rtl">APPLE</bdo>&lrm;, <bdo dir="rtl">PEAR</bdo> and <bdo dir="rtl">ORANGE</bdo> in Arabic.</p>

其中的LRM作为和这个方向串不同方向性的强字符打断了这个方向串的连续性。

将RTL方向性的片段隔离

<p>These fruits are called <bdi><bdo dir="rtl">APPLE</bdo></bdi>, <bdi><bdo dir="rtl">PEAR</bdo></bdi> and <bdi><bdo dir="rtl">ORANGE</bdo></bdi> in Arabic.</p>
<p>These fruits are called <bdi>تفاحة</bdi>, <bdi>كمثرى</bdi> and <bdi>البرتقالي</bdi> in Arabic.</p>

这两种方式虽然使用上有所不同，但原理上是类似的，就是将这三个阿拉伯水果名作为三个方向片段交给Unicode双向算法来处理。

七、结语

在实际编辑HTML页面时，使用Unicode控制字符和相应的HTML元素能起到相同的控制效果，可以根据情况选择具体使用哪种方式。但当HTML元素能够被使用时，建议使用这种方式来控制页面和元素的方向性。另外，还需要注意的是，有些浏览器现阶段并不支持HTML5中新加入的这些元素，所以在设计页面时无论使用哪种控制办法也需要考虑到这个因素，避免出现兼容性问题。