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	設定塊級元素中文字的方向。

列印頁面