HTML5学习笔记(HTML5新标签<BDI>)bdi、bdo实例讲解
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实体‎这种来操作。
湘公网安备 43102202000103号