unicode-bidi
unicode-bidi
CSS 属性与 direction
属性一起决定如何处理文档中的双向文本。例如,如果一段内容包含左右两种方向的文本,则用户代理会使用复杂的 Unicode 算法来决定如何显示文本。unicode-bidi
属性会覆盖此算法,并允许开发人员控制文本嵌入。
试一试
语法
css
/* Keyword values */
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
unicode-bidi: isolate-override;
unicode-bidi: plaintext;
/* Global values */
unicode-bidi: inherit;
unicode-bidi: initial;
unicode-bidi: revert;
unicode-bidi: revert-layer;
unicode-bidi: unset;
值
normal
-
元素相对于双向算法不提供额外的嵌入级别。对于内联元素,隐式重新排序跨越元素边界。
embed
-
如果元素是内联元素,则此值相对于双向算法打开一个额外的嵌入级别。此嵌入级别的方向由
direction
属性给出。 bidi-override
-
对于内联元素,这会创建一个覆盖。对于块级容器元素,这会为不在另一个块级容器元素内的内联级后代创建一个覆盖。这意味着在元素内部,重新排序严格按照
direction
属性的顺序进行;双向算法的隐式部分被忽略。 isolate
-
此关键字指示应在不考虑此元素内容的情况下计算元素的容器方向性。因此,该元素与其同级元素隔离。在应用其双向解析算法时,其容器元素将其视为一个或多个
U+FFFC 对象替换字符
,即像图像一样。 isolate-override
-
此关键字将
isolate
关键字的隔离行为应用于周围内容,并将bidi-override
关键字的覆盖行为应用于内部内容。 plaintext
-
此关键字使元素的方向性在不考虑其父双向状态或
direction
属性的值的情况下计算。方向性使用 Unicode 双向算法的 P2 和 P3 规则计算。此值允许显示使用遵循 Unicode 双向算法的工具已格式化的数据。
正式定义
正式语法
示例
CSS
css
.bible-quote {
direction: rtl;
unicode-bidi: embed;
}
HTML
html
<div class="bible-quote">A line of text</div>
<div>Another line of text</div>
结果
规范
规范 |
---|
CSS 书写模式级别 4 # unicode-bidi |
浏览器兼容性
BCD 表格仅在浏览器中加载