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 屬性
五、結語
雖然前面介紹了幾種改變文本方向的方法，但實際情況會複雜得多。大家可根據實際情況使用。