跳至內容
Astera Technology

間距跟閱讀方向走,別寫死左右

把 inline-start、inline-end 內距對應到實際左右;改方向時,間距也跟住換邊。

LTR 的左右內距為 24/8,RTL 則是 8/24。

下載完整個案資料及參考答案 ↓

先看這個例子

兩個內容框各闊 200px,inline-start 內距 24px、inline-end 8px。一個用 LTR,另一個特設 RTL 測試。香港中文仍用 LTR,RTL 例子只用來核對方向對應。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
LTR查看左、右內距24px/8px
RTL 測試查看左、右內距8px/24px
框尺寸內容 200 + 內距 32 + 邊框 2兩個方向外框同為 234px
下載可編輯 CSV ↓

瀏覽器怎樣處理

邏輯屬性按書寫模式和方向對應。本例水平書寫時,inline-start 在 LTR 是左,在 RTL 是右。同一條 CSS 就能換邊,毋須另寫左右版本。

寫死左內距,不會自動換邊

反例在兩個方向都寫死左 24、右 8。

反例原始碼,請另開例子核對
<style>body{margin:8px}</style>
<style>.note{width:200px;padding-left:24px;padding-right:8px}</style><p class="note" dir="rtl">RTL 方向測試</p>

RTL 反例仍是左 24px、右 8px,未表達原定 inline-start 間距。

試着修正

用邏輯屬性,是否要把中文頁改成 RTL?

查看參考答案

不用。保持真正內容方向。一般 LTR 頁面也可用邏輯屬性;RTL 例子是另行方向測試。

  • 逐個方向記錄實際左右計算值。
  • 方向測試和本地化決定分開。

原始例子檔案

相關資源