CSS - Unicode 双向属性

CSS unicode-bidi 属性用于控制文档中双向文本的显示方式。双向文本包含从左到右 (LTR) 和从右到左 (RTL) 的文本。

unicode-bidi 属性允许开发人员覆盖浏览器的默认行为，并确保双向文本正确显示。

可能的值

normal − 这是默认值，它指定文本应根据文本本身的固有方向显示。换句话说，它将使用文本中字符的方向来确定其显示方式。
embed − 此值用于显式设置元素内文本的方向。当您将 unicode-bidi 设置为 embed 时，还可以使用 direction 属性指定文本应从左到右 (ltr) 显示还是从右到左 (rtl) 显示。
bidi-override − 此值会为内联元素创建覆盖。对于块级元素，它会覆盖浏览器的双向文本算法，并根据 direction 属性严格地排列任何内联子元素内的文本。
isolate − 此值将元素与其同级元素隔离开。
isolate-override − 此值将 isolate 关键字的隔离行为应用于周围内容，并将 bidi-override 关键字的覆盖行为应用于内部内容。
plaintext − 阻止双向文本 (BIDI) 算法影响元素内的文本。

应用于

所有定位元素，但某些值对非内联元素无效。

DOM 语法

object.style.unicodeBidi = "normal|embed|bidi-override|isolate|isolate-override|plaintext";

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

此属性仅供文档类型定义 (DTD) 设计人员使用。通常不建议网页设计师或类似的作者覆盖它。

CSS unicode-bidi - normal 值

以下示例演示了使用 unicode-bidi: normal，文本按其从右到左方向 (RTL) 的默认顺序排列：

<html>
<head>
<style>
   .box {
      direction: rtl;
      unicode-bidi: normal;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS unicode-bidi - normal Value</h2>
   <p>The following text is displayed in its default order from right-to-left direction.</p>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.  
   </div>
</body>
</html>

CSS unicode-bidi - embed 值

以下示例演示了使用 unicode-bidi: embed。此值会将文本的方向嵌入到其周围内容中，当 direction 设置为 rtl 时，文本将从右到左 (RTL) 显示：

<html>
<head>
<style>
   .box {
      direction: rtl;
      unicode-bidi: embed;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS unicode-bidi - embed Value</h2>
   <p>The following text is displayed in its default order from right-to-left direction.</p>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.  
   </div>
</body>
</html>

CSS unicode-bidi - bidi-override 值

以下示例演示了使用 unicode-bidi: bidi-override。此值将文本按反向顺序显示，最右侧的字符显示在第一个位置：

<html>
<head>
<style>
   .box {
      direction: rtl;
      unicode-bidi: bidi-override;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS unicode-bidi - bidi-override Value</h2>
   <p>The following text is displayed in reverse order of the characters in right-to-left direction.</p>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.  
   </div>
</body>
</html>

CSS unicode-bidi - isolate 值

以下示例演示了使用 unicode-bidi: isolate。此值用于将双向文本与其周围文本隔离开：

<html>
<head>
<style>
   .box {
      direction: rtl;
      unicode-bidi: isolate;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS unicode-bidi - isolate Value</h2>
   <p>The following text is displayed in its default order from right to left.</p>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.  
   </div>
</body>
</html>

CSS unicode-bidi - isolate-override 值

以下示例演示了使用 unicode-bidi: isolate-override。此值用于隔离并覆盖双向文本与其周围文本：

<html>
<head>
<style>
   .box {
      direction: rtl;
      unicode-bidi: isolate-override;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS unicode-bidi - isolate-override Value</h2>
   <p>The following text is displayed in reverse order of the characters in right-to-left direction.</p>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.  
   </div>
</body>
</html>

CSS unicode-bidi - plaintext 值

以下示例演示了使用 unicode-bidi: plaintext。此值将文本视为纯文本，不应用任何双向文本算法：

<html>
<head>
<style>
   .box {
      direction: rtl;
      unicode-bidi: plaintext;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS unicode-bidi - plaintext Value</h2>
   <p>The following text is displayed in its default order from left-to-right direction.</p>
   <div class="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.  
   </div>
</body>
</html>

CSS unicode-bidi - 相关属性

以下是与 unicode-bidi 相关的 CSS 属性列表

属性	值
direction	设置块级元素中文本的方向。

打印页面