Css 简明教程

CSS - Unicode-bidi Property

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

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

Possible Values

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

  2. embed − 此值用于显式设置元素中文本的方向。将 unicode-bidi 设置为 embed 时，还可以使用 direction 属性指定文本应从左到右 ( ltr ) 或从右到左 ( rtl ) 显示。

  3. bidi-override − 此值将创建行内元素的覆盖。对于块元素，它将覆盖浏览器的双向文本算法，并严格按照 direction 属性在任何行内子元素内对文本进行流。

  4. isolate −此值将元素与其兄弟元素隔离开。

  5. isolate-override −此值使用关键词 isolate 隔离行为周围内容，使用关键词bidi-override覆盖行为内部内容。

  6. plaintext −防止双向文本（BIDI）算法影响元素内的文本。

Applies to

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

DOM Syntax

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

CSS unicode-bidi - normal Value

以下示例演示如何使用 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 Value

以下示例演示如何使用 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 Value

以下示例演示如何使用 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 Value

以下示例演示如何使用 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 Value

以下示例演示如何使用 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 Value

以下示例演示如何使用 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 - Related Properties

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

property

value

direction

设置块级元素中文本的方向。