CSSLogical property mô tả vị trí theo dòng chảy văn bản thay vì theo trục vật lý trái/phải. Khi dir="rtl", trình duyệt tự lật, không cần một file CSS RTL riêng.
| Vật lý | Logical |
|---|---|
margin-left | margin-inline-start |
padding-right | padding-inline-end |
text-align: left | text-align: start |
border-top | border-block-start |
width / height | inline-size / block-size |
inline là trục chữ chạy (ngang trong tiếng Việt/Anh/Ả Rập), block là trục các dòng xếp chồng. Viết tắt hai chiều cùng lúc: margin-inline: 16px, padding-block: 8px 12px.
css
.badge { margin-inline-end: 8px; border-inline-start: 2px solid var(--border); }
/* dir='rtl' -> margin lật sang trái, border lật sang phải, tự động */Cách chuyển đổi thực tế:
- Đổi trước những chỗ thật sự phụ thuộc hướng đọc: padding/margin ngang,
text-align,bordermột cạnh, vị trí icon,inset-inline-startthayleft. - Giữ nguyên vật lý ở nơi không liên quan hướng đọc: bóng đổ theo hướng ánh sáng, vị trí tuyệt đối của phần tử trang trí.
- Ngoài RTL, logical property còn giúp khi đổi
writing-mode(tiếng Nhật dọc) và làm cùng một component hoạt động đúng ở cả hai chiều mà không nhân đôi rule.
Lật hướng chỉ là một nửa việc: icon mũi tên, biểu đồ tiến trình và nội dung nhúng vẫn phải xử lý riêng.