unicode-bidi

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

unicode-bidi CSS 属性与 direction 属性共同决定了文档中双向文本的处理方式。例如，如果一个内容块同时包含从左到右和从右到左的文本，用户代理会使用复杂的 Unicode 算法来决定如何显示文本。unicode-bidi 属性会覆盖此算法，并允许开发者控制文本的嵌入。

试一试

unicode-bidi: normal;

unicode-bidi: bidi-override;

unicode-bidi: plaintext;

unicode-bidi: isolate-override;

<section class="default-example" id="default-example">
  <p class="transition-all" id="example-element">
    בְּרֵאשִׁ֖ית בָּרָ֣א אֱלֹהִ֑ים אֵ֥ת הַשָּׁמַ֖יִם וְאֵ֥ת הָאָֽרֶץ.
  </p>
</section>

unicode-bidi 和 direction 属性是唯一不受 all 简写属性影响的属性。

警告： 此属性旨在供文档类型定义（DTD）设计者使用。网页设计者和类似作者不应覆盖它。

语法

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: 此元素不会在双向算法方面提供额外的嵌入级别。对于行内元素，隐式重新排序跨元素边界工作。
嵌入: 如果元素是行内元素，此值会根据双向算法打开一个额外的嵌入级别。此嵌入级别的方向由 direction 属性给出。
双向覆盖: 对于行内元素，这会创建一个覆盖。对于块容器元素，这会为不位于另一个块容器元素内的行内级后代创建一个覆盖。这意味着在元素内部，重新排序严格按照 direction 属性的顺序进行；双向算法的隐式部分被忽略。
隔离: 此关键字表示应在不考虑此元素内容的情况下计算元素的容器方向性。因此，该元素与其兄弟元素是隔离的。在应用其双向解析算法时，其容器元素将其视为一个或多个 U+FFFC Object Replacement Character，即像图像一样。
隔离覆盖: 此关键字将 isolate 关键字的隔离行为应用于周围内容，并将 bidi-override 关键字的覆盖行为应用于内部内容。
纯文本: 此关键字使元素的文本方向性在不考虑其父级双向状态或 direction 属性值的情况下计算。文本方向性使用 Unicode 双向算法的 P2 和 P3 规则计算。此值允许显示已经使用遵循 Unicode 双向算法的工具格式化的数据。

正式定义

初始值	`normal`
应用于	所有元素，尽管某些值对非行内元素无效
继承性	否
计算值	同指定值
动画类型	不可动画化

正式语法

unicode-bidi = 
  normal            |
  embed             |
  isolate           |
  bidi-override     |
  isolate-override  |
  plaintext

示例

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 Writing Modes Level 4 # unicode-bidi

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后修改于 2025 年 7 月 14 日，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题