CSS unicode-bidi 属性

属性介绍

CSS unicode-bidi 属性用于控制文本方向和字符级别的书写顺序。

语法

unicode-bidi: normal|embed|isolate|bidi-override|plaintext;

• normal：默认值，文本不受影响。
• embed：内嵌方向，文本嵌入方向使用相对于包含它的块的方向。
• isolate：孤立方向，文本从周围文本分离，它的基础方向由 direction 属性决定。
• bidi-override：双向覆盖方向，强制覆盖当前文本的默认 Unicode 双向算法。
• plaintext：只能控制垂直方向的平面文本，忽略其他的方向控制。

符号“|”用来分隔多个选项，表示只能选择其中之一。

属性值的作用

CSS unicode-bidi 可以用于控制文本方向和字符级别的书写顺序。它旨在解决多语言之间的文本方向的问题。

在 HTML 中，unicode-bidi 属性可以用在以下元素上，它们都是 inline-level 元素。

• p
• h1 ~ h6
• q
• blockquote
• ins
• del
• caption

如果应用于块级元素，则需要使用 display 属性设置为 inline-block 和 block。

各属性值的实现意义

如果想要更加清晰了解 unicode-bidi 各属性值的实现意义和效果，可以参考以下内容：

embed

当选择 embed 属性值时，内嵌方向会根据块容器方向而定。这里“块容器”是指包含元素的元素，它应该被设置为一个块级元素。

例如，一个包含相反文字的段落可以使用以下代码实现：

<p style="direction: rtl;">
  This is some English text, which should be embedded with some Arabic text
  <span style="unicode-bidi: embed;">نص عربي</span>.
</p>

isolate

当选择 isolate 属性值时，孤立方向会分离文本从周围文本并完全使用替代方向。

例如，使用以下代码可以将此语句从右往左书写：

<p style="direction: rtl;">
  This sentence goes from right to left, and arabic replaces in isolate order:
  <span style="unicode-bidi: isolate;">
    نص عربي
  </span>
</p>

bidi-override

当选择 bidi-override 属性值时，字符级别的方向不应由 Unicode 自动计算，而应使用 CSS 指定的值来覆盖默认方向。

例如，使用以下代码可以自定义一些混合方向文本：

<p style="direction: rtl;">
  Mix the text accordingly: <span style="unicode-bidi: bidi-override; direction: ltr;">mixture</span> رشة
</p>

plaintext

当选择 plaintext 属性值时，文本方向可以只在垂直方向控制，而忽略其他方向的控制。

例如，使用以下代码可以将这段文本从上往下垂直书写：

<p style="unicode-bidi: plaintext; writing-mode: vertical-lr;">This is vertical text</p>

总结

CSS unicode-bidi 属性可以用于解决文字方向和书写顺序的问题。属性值的选择会影响文本方向，它们分别为：normal、embed、isolate、bidi-override 和 plaintext。每种属性值实现意义和使用场景不同，需要根据实际需求进行选择。