先看這個例子
兩個內容框各闊 200px,inline-start 內距 24px、inline-end 8px。一個用 LTR,另一個特設 RTL 測試。香港中文仍用 LTR,RTL 例子只用來核對方向對應。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| LTR | 查看左、右內距 | 24px/8px |
| RTL 測試 | 查看左、右內距 | 8px/24px |
| 框尺寸 | 內容 200 + 內距 32 + 邊框 2 | 兩個方向外框同為 234px |
瀏覽器怎樣處理
邏輯屬性按書寫模式和方向對應。本例水平書寫時,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 例子是另行方向測試。
- 逐個方向記錄實際左右計算值。
- 方向測試和本地化決定分開。