CSS - Unicode-bidi

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

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

可能的值

  • 正常- 这是默认值，它指定文本应根据文本本身的固有方向显示。换句话说，它将使用文本中字符的方向来确定应该如何显示。

  • embed - 该值用于显式设置元素内文本的方向。将unicode-bidi设置为embed时，还可以使用 Direction 属性来指定文本是应从左到右 ( ltr ) 还是从右到左 ( rtl ) 显示。

  • bidi-override - 该值创建内联元素的覆盖。对于块元素，它会覆盖浏览器的双向文本算法，并严格根据 Direction属性在任何内联子元素内流动文本。

  • isolate - 该值将元素与其同级元素隔离。

  • isolate-override - 该值使用isolate关键字对周围内容的隔离Behave以及bidi-override关键字对内部内容的覆盖Behave。

  • plaintext - 防止双向文本（BIDI）算法影响元素内的文本。

适用于

所有定位元素，但某些值对非内联元素没有影响。

DOM语法

object.style.unicodeBidi = "normal|embed|bidi-override|isolate|isolate-override|plaintext";
CSS 属性unicode-bidi和Direction 是唯一不受all速记属性影响的属性。
此属性仅供文档类型定义 (DTD) 设计者使用。通常不建议网页设计师或类似作者覆盖它。

CSS Unicode Bidi - 正常值

以下示例演示了如何使用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 - 嵌入值

以下示例演示了如何使用unicode-bidi: embed。该值将文本的方向嵌入其周围的内容中，当方向设置为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 覆盖值

以下示例演示了如何使用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 - 隔离值

以下示例演示了如何使用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 - 隔离覆盖值

以下示例演示了如何使用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 - 纯文本值

以下示例演示了如何使用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 属性列表：

财产 价值
方向 设置块级元素中文本的方向。