CSS - Unicode-bidi 属性：掌握双向文本

你好，未来的网页开发者们！今天，我们将踏上一段激动人心的旅程，进入 CSS 的世界，探索一个听起来可能有点吓人的属性：unicode-bidi。但别担心，在本教程结束时，你会像专业人士一样处理双向文本！

什么是 Unicode-bidi？

在我们深入了解之前，让我们先了解一下 unicode-bidi 是怎么回事。想象一下，你正在编写一个多语言网站，其中包含英文（从左到右）和阿拉伯文（从右到左）文本。你如何确保每种语言都能正确显示？这就是 unicode-bidi 派上用场的地方！

unicode-bidi 属性是你在 CSS 中处理双向文本时的忠实助手。它帮助你控制文档中双向文本的处理方式，确保你的内容无论书写方向如何都能正确显示。

可能的值

让我们来看看 unicode-bidi 属性的可能值：

值	描述
normal	元素不会打开额外的嵌入级别
embed	打开一个额外的嵌入级别
bidi-override	为双向算法创建一个覆盖
isolate	元素与其兄弟元素在双向格式化方面是隔离的
isolate-override	结合了 'isolate' 和 'bidi-override' 的效果
plaintext	元素被隔离，双向格式化被重置

如果现在这些看起来令人困惑，别担心。我们会详细探索每一个值，并提供示例！

应用范围

unicode-bidi 属性可以应用于所有元素。然而，它最常用于内联元素或设置为 display: inline 的元素。

DOM 语法

在 JavaScript 中使用 unicode-bidi，你可以使用以下语法：

object.style.unicodeBidi = "value"

现在，让我们深入每个值，看看它们是如何工作的！

CSS unicode-bidi - normal 值

normal 值是默认设置。它不会在双向算法方面打开额外的嵌入级别。

<p style="unicode-bidi: normal;">
This is English text. ذلك نص عربي.
</p>

在这个例子中，文本将显示为：

This is English text. ذلك نص عربي.

英文文本是从左到右的，而阿拉伯文文本是从右到左的，遵循它们自然的方向。

CSS unicode-bidi - embed 值

embed 值在双向算法方面打开一个额外的嵌入级别。

<p style="unicode-bidi: embed; direction: rtl;">
This is English text. ذلك نص عربي.
</p>

这将显示为：

.ذلك نص عربي This is English text.

在这里，整个段落都被视为从右到左，但英文文本在整体的 RTL 上下文中保持从左到右的方向。

CSS unicode-bidi - bidi-override 值

bidi-override 值为双向算法创建一个覆盖。它强制文本的方向性与 direction 属性匹配。

<p style="unicode-bidi: bidi-override; direction: rtl;">
This is English text. ذلك نص عربي.
</p>

这将显示为：

.يبرع صن اذه .txet hsilgnE si sihT

在这种情况下，所有文本都被严格视为从右到左，甚至反转了英文文本的字符顺序。

CSS unicode-bidi - isolate 值

isolate 值在双向格式化方面将元素与其兄弟元素隔离。

<p>This is <span style="unicode-bidi: isolate; direction: rtl;">ذلك نص عربي</span> some English text.</p>

这将显示为：

This is ذلك نص عربي some English text.

阿拉伯文本被隔离并显示为从右到左，而周围的英文文本保持不变。

CSS unicode-bidi - isolate-override 值

isolate-override 值结合了 isolate 和 bidi-override 的效果。

<p>This is <span style="unicode-bidi: isolate-override; direction: rtl;">English text</span> in a sentence.</p>

这将显示为：

This is txet hsilgnE in a sentence.

span 内的文本被隔离并严格反转。

CSS unicode-bidi - plaintext 值

plaintext 值隔离元素并重置双向格式化为隐含方向。

<p style="direction: rtl;">
This is <span style="unicode-bidi: plaintext;">some English text</span> بعض النص العربي
</p>

这将显示为：

بعض النص العربي some English text This is

span 内的英文文本显示为其自然的从左到右方向，不受父元素的从右到左方向影响。

CSS unicode-bidi - 相关属性

当使用 unicode-bidi 时，你通常会发现自己使用以下相关属性：

属性	描述
direction	设置文本方向
writing-mode	定义文本行是水平还是垂直布局

记住，unicode-bidi 属性与 direction 属性携手工作，以控制双向文本的流动。

结论

恭喜你！你已经深入探讨了 unicode-bidi 的世界。这个属性一开始可能看起来很复杂，但它是在多语言网站工作中不可或缺的工具。记住，熟能生巧，所以不要犹豫，尝试不同的值，看看它们如何影响你的文本。

在你继续网页开发的旅程中，你会遇到许多需要理解双向文本的情况。无论你是为全球观众创建网站还是从事本地化项目，你今天学到的技能都将为你服务。

继续编码，继续学习，最重要的是，享受乐趣！网页开发的世界充满了激动人心的挑战，而掌握像 unicode-bidi 这样的属性只是你冒险的开始。快乐编码！

Credits: Image by storyset