邏輯屬性

常見的使用者介面模式是加上輔助內嵌圖示的文字標籤。

圖示位在文字左側, 圖示:margin-right。 不過發生問題 因為這僅適用於文字方向從左到右時。 如果文字方向變更為從右到左 (阿拉伯文閱讀),圖示將與文字對齊。

你在 CSS 中如何做到這點? 邏輯屬性可讓您解決這些情況。除了許多其他優點外,Waymo 還提供免費的自動支援國際化功能。 這些功能可協助您打造更具彈性、多元包容的前端環境。

術語

頂端、右側、底部和左側的實體屬性是指可視區域的實際尺寸。 這就像是地圖上的指南針玫瑰。 另一方面,邏輯屬性 方塊的邊緣,因為與內容流動有關。 因此,如果文字方向或寫作模式有所變更,這類控制項可能隨之變更。 這是方向性風格重大轉變 而且可在設定介面樣式時享有更多彈性。

區塊流程

區塊流量是指內容的放置方向, 舉例來說,如果有兩個段落,第二個段落即為區塊流程。 在英文文件中,區塊流程是由上至下。 舉例來說,如果某段文字是在同一段文字,由上至下,

三個方塊、div 元素,含向下箭頭,標示為「區塊流程」

內嵌流程

內嵌流程是指文字在句子中的流動方式。 在英文文件中,內嵌流程由左至右。 如果您要將網頁的文件語言變更為阿拉伯文 (<html lang="ar">), 內嵌流程就會從右到左。

三個字是「她販售貝殼」,旁邊有由左至右的箭頭和標示為「內嵌流量」

文字的流動方向取決於文件的寫作模式。 您可以使用 writing-mode 屬性變更文字的配置方向。 可套用至整份文件或個別元素。

流量相對

過去採用 CSS 技術 所以我們只能套用相對於 兩側的方向,套用邊界等屬性 舉例來說,margin-top 會套用至元素的實體頂端。 透過邏輯屬性,margin-top 會變成 margin-block-start。 這意味著無論語言和文字方向為何 區塊流程會提供適當的邊界規則。

這張圖表顯示方塊的各種尺寸,以及各個尺寸區段的開始和結束位置

尺寸

如要避免元素超過特定寬度或高度 請撰寫以下規則:

.my-element {
  max-width: 150px;
  max-height: 100px;
}

流量相對的對等項目為 max-inline-sizemax-block-size。 您也可以使用 min-block-sizemin-inline-size 取代 min-heightmin-width

運用邏輯屬性 那麼寬度和高度規則看起來會像這樣:

.my-element {
  max-inline-size: 150px;
  max-block-size: 100px;
}

開始與結束

與其使用頂端、右側、底部和左側 請使用開始與結尾參數這能讓您有封鎖開始、內嵌端、區塊結束和內嵌開始作業。 這些可讓您套用能回應寫入模式變更的 CSS 屬性。

舉例來說,如要將文字靠右對齊,您可以使用這個 CSS:

p {
  text-align: right;
}

如果希望手機 而是開始朝閱讀方向的開頭 這沒有幫助 使用邏輯值之後,您就能使用更實用的 startend 值對應至文字方向。 文字對齊規則現在看起來像這樣:

p {
  text-align: end;
}

間距與定位

marginpaddinginset 的邏輯屬性 讓元素定位,以及決定這些元素在書寫模式中如何互動,更加方便有效率。 邊界和邊框間距相關屬性仍是直接對應方向, 但主要的差別在於,當寫作模式變更時,會隨之變更。

.my-element {
  padding-top: 2em;
  padding-bottom: 2em;
  margin-left: 2em;
  position: relative;
  top: 0.2em;
}

這會使用 padding 新增一些垂直內部空間,並使用 margin 從左側推送該空間。 top 屬性也會將屬性向下移。 如果有對等的邏輯屬性,則可能如下所示:

.my-element {
  padding-block-start: 2em;
  padding-block-end: 2em;
  margin-inline-start: 2em;
  position: relative;
  inset-block-start: 0.2em;
}

這會透過 padding 新增一些內嵌在空間內,並透過 margin 從內嵌開始推送。 inset-block 屬性會將該屬性從區塊開始往內移動。

inset-block 屬性不是唯一具有邏輯屬性的簡短選項。 這項規則可以進一步壓縮 使用簡式版本的邊界和邊框間距屬性。

.my-element {
  padding-block: 2em;
  margin-inline: 2em 0;
  position: relative;
  inset-block: 0.2em 0;
}

框線

您也可以使用邏輯屬性新增 borderborder-radius。 如要在右下方和右側加上邊框 (右半徑),建議編寫以下規則:

.my-element {
  border-bottom: 1px solid red;
  border-right: 1px solid red;
  border-bottom-right-radius: 1em;
}

或者,您可以使用如下的邏輯屬性:

.my-element {
  border-block-end: 1px solid red;
  border-inline-end: 1px solid red;
  border-end-end-radius: 1em;
}

border-end-end-radius 中的 end-end 是區塊結尾「和」內嵌結尾。

單位

邏輯屬性提供兩個新的單位:vivbvi 單位為內嵌方向的 1% 可視區域大小。 對等的非邏輯屬性為 vwvb 單位是可視區域方向的 1%。 對等的非邏輯屬性為 vh

這些單位一律會對應到閱讀方向。 舉例來說,如果要讓元素佔用可視區域 80% 的可用內嵌空間, 使用 vi 單元時,如果書寫模式為直式,系統會自動將該大小切換為上下。

以務實方式使用邏輯屬性

邏輯屬性和寫入模式不只適用於國際化。 可用來產生用途更廣泛的使用者介面。

如果您的圖表在 X 軸和 Y 軸上都有標籤, 您可能會希望 Y 標籤上的文字垂直閱讀

示範中的 Y 軸標籤是 vertical-rlwriting-mode 這兩個標籤可以使用相同的 margin 值。 margin-block-start 值適用於兩個標籤 這是因為 Y 軸的區塊起點位於右側,X 軸頂端則位於頂端。 區塊開始的兩側加上紅色邊框,方便您看得見。

解決圖示問題

我們已介紹邏輯屬性 這項知識可應用於我們一開始的設計問題

p {
  display: inline-flex;
  align-items: center;
}

p svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
  flex: none;
}

系統已將邊界套用至圖示元素右側。 為了能支援圖示和文字之間的間距,以便支援所有閱讀方向, 必須改用 margin-inline-end 屬性。

p {
  display: inline-flex;
  align-items: center;
}

p svg {
  width: 1.2em;
  height: 1.2em;
  margin-inline-end: 0.5em;
  flex: none;
}

現在,無論閱讀方向為何 圖示會調整成其本身的位置和空間。

隨堂測驗

測試邏輯屬性相關知識

當你用手書寫時,手腕會沿著哪個邏輯軸移動?

inline
block

勾選可受惠於邏輯屬性的所有功能

顏色
盒子邊角
對齊
盒子
個大小
陰影

底線的哪個邏輯上會加上底線?

區塊開始
內嵌開始
內嵌結尾
區塊結束