CSS 属性

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

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

属性值

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

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

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

  • isolate: 该值隔离元素与其同级元素的区别。

  • isolate-override: 该值使用isolate关键字对周围内容的隔离行为以及bidi-override关键字对内部内容的覆盖行为content.

  • plaintext: 防止双向文本 (BIDI) 算法影响元素内的文本。

适用范围

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

DOM语法

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

CSS unicode-bidi: nomal

以下示例演示如何使用 unicode-bidi:normal ，中的文本从右到左方向 (RTL) 的默认顺序 -

<html>
<head>
<style>
   .box {
      direction: rtl;
      unicode-bidi: normal;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS unicode-bidi: normal 属性</h2>
   <p>以下文本按默认顺序从右到左显示.</p>
   <div class="box">
      坚持，是一种必要的品格；只有不懈地坚持，才可能达到预期的彼岸，才能摘取成功的花朵。 
   </div>
</body>
</html>

CSS unicode-bidi: embed

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

<html>
<head>
<style>
   .box {
      direction: rtl;
      unicode-bidi: embed;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS unicode-bidi: embed 属性</h2>
   <p>以下文本按默认顺序从右到左显示.</p>
   <div class="box">
      坚持，是一种必要的品格；只有不懈地坚持，才可能达到预期的彼岸，才能摘取成功的花朵。
   </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 属性</h2>
   <p>以下文本以与从右到左方向的字符相反的顺序显示.</p>
   <div class="box">
      坚持，是一种必要的品格；只有不懈地坚持，才可能达到预期的彼岸，才能摘取成功的花朵。
   </div>
</body>
</html>

CSS unicode-bidi:  isolate 

以下示例演示如何使用 unicode-比迪烟:隔离。该值用于将双向文本与其周围文本隔离。 −

<html>
<head>
<style>
   .box {
      direction: rtl;
      unicode-bidi: isolate;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS unicode-bidi: isolate 属性</h2>
   <p>以下文本按默认顺序从右到左显示.</p>
   <div class="box">
      坚持，是一种必要的品格；只有不懈地坚持，才可能达到预期的彼岸，才能摘取成功的花朵。
   </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 属性</h2>
   <p>以下文本以与从右到左方向的字符相反的顺序显示.</p>
   <div class="box">
      坚持，是一种必要的品格；只有不懈地坚持，才可能达到预期的彼岸，才能摘取成功的花朵。
   </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 属性</h2>
   <p>以下文本按默认顺序从左到右显示.</p>
   <div class="box">
      坚持，是一种必要的品格；只有不懈地坚持，才可能达到预期的彼岸，才能摘取成功的花朵。
   </div>
</body>
</html>

CSS unicode-bidi: 相关属性

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

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