unicode-bidi

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

unicode-bidi CSS 屬性與 direction 屬性共同決定了文件中雙向文字的處理方式。例如,如果一個內容塊同時包含從左到右和從右到左的文字,使用者代理會使用複雜的 Unicode 演算法來決定如何顯示文字。unicode-bidi 屬性會覆蓋此演算法,並允許開發者控制文字的嵌入。

試一試

unicode-bidi: normal;
unicode-bidi: bidi-override;
unicode-bidi: plaintext;
unicode-bidi: isolate-override;
<section class="default-example" id="default-example">
  <p class="transition-all" id="example-element">
    בְּרֵאשִׁ֖ית בָּרָ֣א אֱלֹהִ֑ים אֵ֥ת הַשָּׁמַ֖יִם וְאֵ֥ת הָאָֽרֶץ.
  </p>
</section>

unicode-bididirection 屬性是唯一不受 all 簡寫屬性影響的屬性。

警告: 此屬性旨在供文件型別定義(DTD)設計者使用。網頁設計者和類似作者不應覆蓋它。

語法

css
/* Keyword values */
unicode-bidi: normal;
unicode-bidi: embed;
unicode-bidi: isolate;
unicode-bidi: bidi-override;
unicode-bidi: isolate-override;
unicode-bidi: plaintext;

/* Global values */
unicode-bidi: inherit;
unicode-bidi: initial;
unicode-bidi: revert;
unicode-bidi: revert-layer;
unicode-bidi: unset;

normal

此元素不會在雙向演算法方面提供額外的嵌入級別。對於行內元素,隱式重新排序跨元素邊界工作。

嵌入

如果元素是行內元素,此值會根據雙向演算法開啟一個額外的嵌入級別。此嵌入級別的方向由 direction 屬性給出。

雙向覆蓋

對於行內元素,這會建立一個覆蓋。對於塊容器元素,這會為不位於另一個塊容器元素內的行內級後代建立一個覆蓋。這意味著在元素內部,重新排序嚴格按照 direction 屬性的順序進行;雙向演算法的隱式部分被忽略。

隔離

此關鍵字表示應在不考慮此元素內容的情況下計算元素的容器方向性。因此,該元素與其兄弟元素是隔離的。在應用其雙向解析演算法時,其容器元素將其視為一個或多個 U+FFFC Object Replacement Character,即像影像一樣。

隔離覆蓋

此關鍵字將 isolate 關鍵字的隔離行為應用於周圍內容,並將 bidi-override 關鍵字的覆蓋行為應用於內部內容。

純文字

此關鍵字使元素的文字方向性在不考慮其父級雙向狀態或 direction 屬性值的情況下計算。文字方向性使用 Unicode 雙向演算法的 P2 和 P3 規則計算。此值允許顯示已經使用遵循 Unicode 雙向演算法的工具格式化的資料。

正式定義

初始值normal
應用於所有元素,儘管某些值對非行內元素無效
繼承性
計算值同指定值
動畫型別不可動畫化

正式語法

unicode-bidi = 
normal |
embed |
isolate |
bidi-override |
isolate-override |
plaintext

示例

CSS

css
.bible-quote {
  direction: rtl;
  unicode-bidi: embed;
}

HTML

html
<div class="bible-quote">A line of text</div>
<div>Another line of text</div>

結果

規範

規範
CSS Writing Modes Level 4
# unicode-bidi

瀏覽器相容性

另見