DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!
unicode-bidi
属性是用于处理 HTML 和类似基于标记的语言(如 XML)中双向文本呈现的两个 CSS 属性之一。 另一个属性是 direction
,这两个属性一起用于在一个 DOM 元素中创建具有不同文本方向(从右到左和从左到右)的嵌入文本级别。
.bilingual-excerpt {
direction: rtl;
unicode-bidi: embed;
}
浏览器通常会根据元素的 lang
属性、浏览器的区域设置以及特定元素的 font-family
来确定内联文本的流动方向。 当元素包含 LTR 文本和 RTL 文本时,unicode-bidi
就派上用场了。
用户代理会应用 Unicode 标准定义的复杂算法来确定文本的显示方式。 此属性专门控制 Unicode 双向算法的嵌入级别和覆盖。
unicode-bidi
属性有三个得到广泛支持的值。
- “normal” 关键字,它不提供额外的嵌入双向文本级别(默认的浏览器行为)。 具有此属性的元素将只包含 LTR 或 RTL 文本。
- “embed” 关键字,它允许元素中包含双向文本(例如,RTL 文本在 LTR 文本中流动)。 这是由
direction
属性决定的,必须应用于内联元素。 - “bidi-override” 关键字,当应用于内联元素时,它的作用与 “embed” 相同。 在块级元素上,它会覆盖浏览器的双向文本算法,并严格根据
direction
属性使任何内联子元素中的文本流动。
要点
unicode-bidi
属性“是为 DTD 设计人员准备的。 网页设计师和类似的作者不应该覆盖它。” 在您需要使用它时,请谨慎决定。- 虽然 Internet Explorer 从 5.5 版开始在技术上支持
unicode-bidi
,但存在“与浮动元素相关的严重错误”,并且在 IE 8 及更高版本中使用该属性才是可靠的(见下文)。
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
有效 | 有效 | 有效 | 有效 | 8.0+ | 有效 | 有效 |
这真的很酷!从中学到了一些东西!
我也是!
我知道
U+202D
和U+202E
,但我不知道还有 CSS 可以以更易读的方式做到同样的事情!令我困惑的是,当 Unicode 和 HTML 做同样的事情时(例如,字符制表符
U+0009
和 HTML 表格;我以为 HTML 只在表格上显示文本,而不是围绕文本格式化表格?)。顺便说一下,rtl 是 从右到左
U+202E
而 ltr 是 从左到右
U+202D