Unicode控制字符
一、前言
在所有主要的Web浏览器中内存中的字符顺序(逻辑)与它们显示的顺序(可视)是不同的。Unicode 定义了它其中每个字符的方向属性,浏览器应用的一组规则(通过这个来进行自动判断文本Unicode方向属性应该使用哪种方向)在显示时产生正确的顺序由Unicode双向算法进行描述,也可简称为BIDI算法。控制字符,有时候也称非打印字符,是出现在特定的信息文本中,表示某一控制功能的字符。这类字符并不显示,只包含某种特定的功能。
二、Unicode方向属性
Unicode方向属性包含以下三种类型:
- 强字符:大部分的字符都属于强字符,比如英文字母、汉字和阿拉伯字母。它们的方向性是确定的(英文字母是从左到右,而阿拉伯字母则从右到左),和其上下文的bidi属性无关。并且,强字符在bidi算法中可能会影响其前后字符的方向性;
- 弱字符:数字和数字相关的符号属于弱字符。它们的方向性是确定的,但对其前后字符的方向性不会产生影响;
- 中性字符:大部分的标点符号和空格属于中性字符。它们的方向性是不确定的,由上下文的bidi属性来决定其方向。
方向性 | 相关字符 | 效果 |
---|---|---|
Left-to-Right (LTR) | 强字符从左至右(英文字母、汉字以及世界上大部分从左到右书写的文字) | 方向性确定,LTR,和上下文无关。并且可能会影响其前后字符的方向性。 |
Right-to-Left (RTL) | 强字符从右至左(阿拉伯文字、波斯语以及大部分从右到左书写的文字) | 方向性确定,RTL,和上下文无关。并且可能会影响其前后字符的方向性。 |
Left-to-Right (LTR) / Right-to-Left (RTL) | 弱字符(数字和数字相关的符号) | 和强字符一样方向性也是确定的,但是不会影响前后字符的方向性。 |
Neutral | 中性字符(大部分标点符号和空格) | 方向性不确定,由上下文环境决定其方向。 |
2.1 全局方向
也可以成为基础方向。全局方向是一个区域中的总体方向。中英文环境一般是 (LTR) 从左至右,而阿拉伯文环境则为 (RTL) 右至左的书写顺序。我们可以通过dir
属性或者direction
样式,设置指定方向。
2.2 方向串
方向串是指在一段文字中具有相同方向性的连续字符,并且其前后没有相同方向性的其它方向串。如以下例子:
<p>phone:(415)555-3695</p>
<p>هاتف:(415)555-3695</p>
<p dir="ltr">هاتف:(415)555-3695</p>
<p dir="rtl">هاتف:(415)555-3695</p>
我们可以看到,含有阿拉伯文字的段落,电话号码好像按符号分割分组反方向显示了。但实际上并非故意这样输入的,而是电话号码输入完成后再在电话号码前加上阿拉伯文字之后就变成这样了。
文中首个强类型字符是阿拉伯文字,因此其所在的文本区域的全局方向为RTL,但弱类型的数字则保持了原方向LTR,而中性字符"😦)-"没有被强字符包围则跟随了全局方向。
对于以上含有阿拉伯文字的段落,我们可以得到6个不同的方向串。正是因为中性符号被全局方向影响,使得原本的号码被拆分成不同的方向串,从而重新排列。
三、Unicode控制字符
为了解决上面的问题你,Unicode标准中定义了一系列方向性控制字符,这些字符在页面上并不显示,也不占用展示空间。他们像是一些标记,影响着BIDI算法对文字书写方向的判断。下面介绍一些常用的控制字符。
3.1 隐式控制字符
名称 | 方向 | Unicode Code | HTML Code |
---|---|---|---|
Left-To-Right Mark (LRM) | 左->右 | U+200E | &lrm、‎、‎ |
Right-To-Left Mark (RLM) | 右->左 | U+200F | &rlm、‏、‏ |
LRM是LTR强字符,RLM是RTL强字符。使用时要将需要改变方向的字符包裹起来,从而达到控制方向串的目的。在下面例子的第一个段落中,符号@
没有被强字符包围因此使用全局方向RTL,整个文本被分为三个方向串,所以文本被重新排序。
第二个段落中,使用LRM强字符包围符号@
,强制改变其方向为从左到右,此时文本只有一个LTR的方向串。即使手动设置了全局方向dir,也无法覆盖被强字符影响的中性字符。
<p dir="rtl">[email protected]</p>
<p dir="rtl">123456‎@‎qq.com</p>
3.2 显式控制字符
显式控制字符需要配合结束标记符使用。
3.2.1 Embedding
名称 | 方向 | Unicode Code | HTML Code |
---|---|---|---|
Left-To-Right Embedding (LRE) | 左->右 | U+202A | ‪, dir='ltr' |
Right-To-Left Embedding (RLE) | 右->左 | U+202B | ‫, dir='rtl' |
Pop Directional Formatting (PDF) | 结束标记 | U+202C | ‬ |
使用LRE或者RLE,可以改变控制字符后的文本区域的全局方向。但不影响强字符和弱字符的方向。
也可以通过dir
属性或者direction
样式实现。
3.2.2 Override
名称 | 方向 | Unicode Code | HTML Code |
---|---|---|---|
Left-To-Right Override (LRO) | 左->右 | U+202D | ‭, <bdo dir='ltr'> |
Right-To-Left Override (RLO) | 右->左 | U+202E | ‮, <bdo dir='rtl'> |
LRO或者RLO会强制将控制符后的字符的方向属性覆盖为对应的方向,各种字符都会被影响。
结束标记符使用的也是PDF,在此处PDF还可以表示为</bdo>
。
3.2.3 Isolate
名称 | 方向 | Unicode Code | HTML Code |
---|---|---|---|
Left-To-Right Isolate (LRI) | 左->右 | U+2066 | ⁦, <bdi dir='ltr'> |
Right-To-Left Isolate (RLI) | 右->左 | U+2067 | ⁧, <bdi dir='rtl'> |
First Strong Isolate (FSI) | 自适应 | U+2068 | ⁨, <bdi dir='auto'> |
Pop Directional Isolate (PDI) | 结束标记 | U+2069 | ⁩, </bdi> |
Isolate控制符用来在双向文字中加入脱离与其父元素的全局方向的方向串,可以使用<bdi>
标签实现。<bdi>
标签有点类似与<span>
标签的作用,但不同的是<bdi>
标签本身带有默认方向属性,dir默认值为auto。
虽然控制符和相应的HTML元素能够达到相同的控制效果,但需要注意的是,有些浏览器现阶段并不支持<bdi>
等新标签,比如IE。
四、相关的CSS属性
除了上文提到的控制文本方向,我们还可以使用css中unicode-bidi
和direction
属性决定文字渲染方向、书写方向。
具体使用方法可以参考以下教程:
direction: CSS direction 属性
unicode-bidi: CSS unicode-bidi 属性
五、结语
虽然前面介绍了几种改变文本方向的方法,但实际情况会复杂得多。大家可根据实际情况使用。