關於方向的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>‎, <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中新加入的這些元素，所以在設計頁面時無論使用哪種控制辦法也需要考慮到這個因素，避免出現兼容性問題。