논리적 속성이 필요한 이유: 국제화

기존 CSS는 위쪽, 오른쪽, 아래쪽, 왼쪽과 같은 물리적 방향을 사용합니다. 이는 영어처럼 왼쪽에서 오른쪽으로 쓰는(LTR) 언어에는 적합하지만, 아랍어와 히브리어처럼 오른쪽에서 왼쪽으로 쓰는(RTL) 언어나 전통적인 일본어처럼 세로로 쓰는 문자 체계에서는 제대로 작동하지 않습니다.

다음과 같이 비교할 수 있습니다.

• 물리적 방향: 위쪽, 오른쪽, 아래쪽, 왼쪽 — 화면에 고정됨
• 논리적 방향: 블록 시작, 블록 끝, 인라인 시작, 인라인 끝 — 쓰기 모드에 상대적임

모든 문자 체계에는 다음이 있습니다.

• 블록 축: 텍스트 블록이 쌓이는 방향(LTR/RTL에서는 세로, 세로 쓰기에서는 가로)
• 인라인 축: 한 줄 안에서 텍스트가 흐르는 방향(LTR/RTL에서는 가로, 세로 쓰기에서는 세로)

LTR(영어)에서는 인라인 시작이 왼쪽이고 인라인 끝이 오른쪽입니다. RTL(아랍어)에서는 인라인 시작이 오른쪽이고 인라인 끝이 왼쪽입니다. 논리적 속성은 미디어 쿼리나 JavaScript 없이 자동으로 이에 맞게 조정됩니다.

물리적 속성으로 작성한 사이트는 방향이 바뀌어야 하는 모든 여백, 안쪽 여백, 테두리, 위치, 텍스트 정렬 속성에 대해 별도의 RTL 재정의 스타일시트나 속성별 재정의가 필요합니다. 이로 인해 유지 관리 작업이 두 배로 늘어납니다.

writing-mode: vertical-rl이 설정되면(세로로 쓰는 일본어/한국어) 블록 축은 가로가 되고 인라인 축은 세로가 됩니다. 논리적 속성은 자동으로 이에 맞게 조정됩니다.

모든 주요 브라우저가 논리적 속성을 지원합니다. 이제 CSS 명세에서는 쓰기 모드나 방향에 따라 바뀔 수 있는 방향과 관련된 모든 속성에 논리적 속성을 사용하도록 권장합니다.

논리적 속성을 올바르게 사용하는 단일 코드베이스는 중복 없이 LTR, RTL, 세로 쓰기를 지원합니다. CSS는 루트 요소의 direction 및 writing-mode 값을 따르기만 하면 됩니다.

CSS만 사용하지 말고 HTML에서 쓰기 방향을 설정하십시오.

CSS 전체를 한 번에 다시 작성할 필요는 없습니다. 새 구성 요소부터 논리적 속성을 사용하십시오. 시간이 지나면서 국제화에 민감한 영역에 속한 구성 요소의 물리적 속성을 리팩터링하십시오.

direction CSS 속성(ltr 또는 rtl)은 인라인 흐름의 방향에 영향을 줍니다. 이 속성은 writing-mode와 함께 작동하여 요소의 전체 문자 체계 맥락을 정의합니다.

margin-left와 같은 물리적 CSS 속성이 RTL 레이아웃에서 문제를 일으키는 이유는 무엇인가요?

CSS 논리적 속성은 물리적인 위쪽, 오른쪽, 아래쪽, 왼쪽 대신 블록 및 인라인 모델을 사용합니다. 따라서 하나의 스타일시트로 LTR, RTL, 세로 쓰기 문자 체계에서 작동할 수 있습니다. direction 및 writing-mode 속성이 맥락을 정의하며, 논리적 속성은 이 맥락에 맞게 자동으로 조정됩니다.