이 문서는 CSS 논리 속성(Logical Properties) 중 RTL 지원과 밀접한 항목만 정리했습니다.
(참고: MDN – CSS Logical Properties)
float: inline-start; /* LTR: left, RTL: right */
float: inline-end; /* LTR: right, RTL: left */
clear: inline-start;
clear: inline-end;
👉 기존 float: left/right를 대체. RTL 언어에서도 자동 반전됨.
/* 기존 물리 속성 */
top: 0;
right: 20px;
/* 논리 속성 */
inset-block-start: 0; /* top */
inset-inline-end: 20px; /* right in LTR, left in RTL */
inset-inline: 10px 20px; /* inline-start, inline-end */
inset-block: 5px 15px; /* block-start, block-end */
text-align: start; /* LTR: left, RTL: right */
text-align: end; /* LTR: right, RTL: left */
👉 기존 text-align: left/right를 대체.
👉 다국어 환경에서 별도 조건 처리 없이 사용 가능.
| 영역 | 물리 속성 | 논리 속성 |
|---|---|---|
| Float/Clear | left, right | inline-start, inline-end |
| Positioning | top, left, right, bottom | inset-block-start, inset-inline-end 등 |
| Text Alignment | left, right | start, end |