菜鳥教程上的定義：
bdi 指的是 bidi 隔離（Bi-directional Isolation）。
<bdi> 標簽允許您設置一段文本，使其脫離其父元素的文本方向設置。
在發布用戶評論或其他您無法完全控制的內容時，該標簽很有用。
上面這段定義基本是看不懂這個標簽做什么用的。
要理解<bdi>必須先了解下Unicode雙向算法
Unicode雙向算法，做什么用的呢？
用來處理雙向文字的算法，那么雙向文字又是啥呢？
雙向文字就是文字的閱讀順序了，那么我們明白了，這算法就是用來排文字順序的！
（大家都知道現在中文是從左到右書寫閱讀的，古代卻是從右到左的，外國的很多文字（阿拉伯文字從右到左，拉丁文字和西里爾文字從做到右，阿塞拜疆語可以同時使用這些文字，所以不好確定文字順序）也是不統一順序的，那么在電腦里就要有控制順序的方法啦，底層這個方法就是 bidi算法了又叫Unicode雙向算法 ）
先來大概了解下這個算法：
定向格式化字符也叫Unicode 控制字符是來控制文字的顯示：
| 隱式定向格式化字符(Implicit Directional Formatting Characters) | LRM, RLM, ALM |
| 顯式定向嵌入格式化字符和顯式定向 重寫格式化字符(Explicit Directional Embedding and Override Formatting Characters) | LRE, RLE, LRO, RLO, PDF |
| 顯式定向隔離格式化字符(Explicit Directional Isolate Formatting Characters) | LRI, RLI, FSI, PDI |
隱性模式的算法在處理復雜情況的雙向文字時會顯得不足，這時就可以使用顯模式來進行補充。
HTML 5支持的雙向(bidi)標記如下：（格式化字符和html標簽相關的意義）
| Unicode | 等價的標記 | 描述 |
|---|---|---|
| RLI | <bdi dir = "rtl"> | |
| LRI | <bdi dir = "ltr"> | |
| FSI | <bdi> | 或 <bdi dir = "auto"> |
| RLO | <bdo dir = "rtl"> | 或 <bdi dir = "auto"> |
| LRO | <bdo dir = "ltr"> | |
| RLE | dir = "rtl" | 在塊元素或內聯元素中的屬性 |
| LRE | dir = "ltr" | 在塊元素或內聯元素中的屬性 |
| PDF, PDI | 標記的終止，如</bdi> |
雙向字符類型：
| 分類 | 類型 | 簡述 | 范圍 |
|---|---|---|---|
| 強類型(strong) | L | Left-to-Right | LRM，大部分字母，音節，漢字，非歐洲或非阿拉伯數字，... |
| R | Right-to-Left | RLM，希伯來字母和相關的標點 | |
| AL | Right-to-Left Arabic | ALM，阿拉伯語，它拿字母，和敘利亞字母，這些文字的特定標點，... | |
| 弱類型(weak) | EN | 歐洲數字(European Number) | 歐洲數字，東阿拉伯-印度數字，... |
| ES | 歐洲數字分隔符(European Number Separator) | 加號，減號 | |
| ET | 歐洲數字終止符(European Number Terminator) | 度的標志，貨幣符號 | |
| AN | 阿拉伯數字(Arabic Number) | 阿拉伯-印度數字，阿拉伯小數和千位分隔符，… | |
| CS | 常見的數字分隔符(Common Number Separator) | 冒號，逗號，句號，不換行空格(no-break space)，... | |
| NSM | Nonspacing Mark | 普通類值(General_Category)的字符：Mn(Nonspacing_Mark)和Me (Enclosing_Mark) | |
| BN | 中性邊界(Boundary Neutral) | 除了明確給出的其他類型，可忽略的默認值，非字符和控制字符 | |
| 中性 (Neutral) | B | 段落分隔符(Paragraph Separator) | 段落分隔符，適當的換行符函數，更高級別的協議確定段 |
| S | 部分分隔符(Segment Separator) | Tab | |
| WS | 空格(Whitespace) | 空格，圖形空格，線分隔符，換頁符，一般標點符號，… | |
| ON | Other Neutrals | 所有其他字符，包括對象替換字符 | |
| 顯式格式化(Explicit Formatting) | LRE | Left-to-Right Embedding | LRE |
| LRO | Left-to-Right Override | LRO | |
| RLE | Right-to-Left Embedding | RLE | |
| RLO | Right-to-Left Override | RLO | |
| Pop Directional Format | |||
| LRI | Left-to-Right Isolate | LRI | |
| RLI | Right-to-Left Isolate | RLI | |
| FSI | First Strong Isolate | FSI | |
| PDI | Pop Directional Isolate | PDI |
下面介紹下html5中表示unicode含義的標簽的使用方法
首先要先說一下方向串的問題，方向串是指在一段文字中具有相同方向性的連續字符，並且其前后沒有相同
方向性的其它方向串。
看圖方向串.png
-----------------------------------------------------------------------------------------------------------------------------------------------
屬性 dir（dir = "ltr" 和 dir = "rtl"）
從上面表格所知就是 LRE和RLE <顯式定向嵌入格式化字符>
表示接下來文字片段內的方向開始變為從左到右 和 從右到左
可以用在各種html 標簽上
例子：<p dir="ltr">This is an apple.</p>
結果：This is an apple.(向左側靠近)
例子：<p dir="rtl">This is an apple.</p>
結果：.This is an apple(向右側靠近)
這里的兩個例子方向串：
1)This is an apple
2).
總結：
dir屬性只是讓被包裹的片段從瀏覽器左面開始 或則從右面開始，影響范圍整個標簽
當「嵌入」作用於一些顯式格式化字符時，嵌入格式化字符內的文本范圍並不與周圍的文本相互獨立。即在「嵌入」范圍內的字符可以影響到外部的字符排序，反之亦然。
標簽結束就是終止顯式定向嵌入和重寫 所以所謂的影響上下文對相關的標簽來說應該只是在標簽之內的意思
標簽 <bdo>
<bdo dir = "rtl"></bdo>
<bdo dir = "ltr"></bdo>
從上面表格所知就是 LRO 和 RLO <顯式定向重寫格式化字符>
表示雙向算法會將后面所有文字的雙向屬性視為從左到右強字符 和從右到左強字符
例子：<p>This <bdo dir="ltr">is</bdo> an apple.</p>
結果：This is an apple.
例子：<p>This <bdo dir="rtl">is</bdo> an apple.</p>
結果：This si an apple.
這里的兩個例子方向串：
1)This
2)is
3)an apple
4).
總結：
重寫 會把標簽包裹的全部內容進行排序
標簽<bdo> 和 dir 屬性
例子：<p dir="ltr">This <bdo dir="rtl">is</bdo> an apple dfe3 fdfgg 1.</p>
結果：This si an apple dfe3 fdfgg 1.
例子：<p dir="rtl">This <bdo dir="rtl">is</bdo> an apple dfe3 fdfgg 1.</p>
結果：.an apple dfe3 fdfgg 1 si This
這里的兩個例子方向串：
1)This （字母順序因為強字符所以按照當地的默認隱身算法來排序（我們中國自然是從左向右））
2)is （bdo重寫字母順序）
3)an apple dfe3 fdfgg 1 （上下文順序是 dir屬性 rtl）
4) . （這是一個句號中性符 上下文順序是 dir屬性 rtl）
四個方向串。
然后根據 強字符和中性符 來排序就是 .an apple dfe3 fdfgg 1 is This這個樣子了
總結：
1.dir 作為<顯式定向嵌入格式化字符>是會影響標簽內的順序的，就會讓標簽在瀏覽器右側顯示
2.根據上圖所知，字母是強字符所以文字方向是不會改變的而且也沒有bdo重寫所以字母順序還是 按照順序來寫，然后空格和表面符號是中性符，會根據上下文來，這里上下文屬性是 rtl 所以有關空格和標點的位置都會被從右向左排序。
3.然后is是bdo重寫,那么最后的結果就是 .an apple dfe3 fdfgg 1 si This 這個樣子並且是顯示在瀏覽器右側！
標簽<bdi>
<bdi> 標簽中可以使用 dir 屬性來指定方向性，但默認情況下該屬性的值為 auto。也就是說，使用
<bdi>...</bdi> 的結果和使用 <bdi dir="auto">...</bdi> 是一樣的。
例子：<p dir="rtl">This an <bdi dir="rtl">apple <bdo dir="rtl">dfe3</bdo> fdfgg</bdi> 1.</p>
結果：.This an fdfgg 3efd apple 1
分析下方向串：
這里有2組方向串，由於bdi是隔離，不會對隔離外的文本產生影響，所以並不會增加方向串
第一組方向串是 屬性dir標簽下內容
1)This an apple dfe3 fdfgg 1 （bdi部分和屬性dir內容 為一個整體）
2).
第二組方向串是 bdi內部由於bdo產生的方向串
1)apple
2)dfe3
3)fdfgg
總結：
1.dir屬性rtl 所以內容會被寫在右側
2.因為有bdo且包裹的都是強字符所以方向串開始增加
3.根據方向串安排順序即可
重點：bdi和bdo不同點在與 不會對隔離外的文本產生影響，所以並不會增加方向串
以上我們平時只需要學會 這3個標簽的運用即可。
PS補充：
例子：<p dir="ltr">These fruits are called <bdo dir="rtl">APPLE</bdo>, <bdo dir="rtl">ORANGE</bdo> in Arabic.</p>
結果：These fruits are called EGNARO ,ELPPA in Arabic.
這里的方向串:
1) These fruits are called
2) APPLE, ORANGE
3) in Arabic
4).
為什么<bdo dir="rtl">APPLE</bdo>, <bdo dir="rtl">ORANGE</bdo>這段是在一個方向串中的？
首先，運行等級（level run）是指具有相同嵌入等級的字符所形成的最高子串。最高子串與其直接接觸的前后字符的等級不相同（運行水平也被稱作定向運行）。
然后，通過在中性字符周圍插入適當的定向標記，或者使用顯式定向格式化字符，可以改變中性字符的水平。
運行水平對雙向算法的兩個不同階段的十分重要。
以上為Unicode雙向算法中文檔的部分解釋。
個人理解為，中性字符周圍插入bdo<顯示定向格式化字符>，就會讓這bdo之后的內容都整合成一個方向串 直到</bdo>結束。
想要破壞這種結構的方法是 在中性符中插入 強字符（英文單詞）或者使用Unicode 控制字符的HTML實體‎這種來操作