CSS unicode-bidi 属性
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。每种属性值实现意义和使用场景不同,需要根据实际需求进行选择。