블록 및 인라인 방향

블록 방향은 블록 수준 상자가 쌓이는 방향입니다. 가로 쓰기 문자 체계(LTR/RTL)에서는 블록 방향이 위에서 아래입니다. 세로 쓰기 모드에서는 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽으로 바뀝니다.

인라인 방향은 한 줄 안에서 텍스트가 흐르는 방향입니다. LTR 언어에서는 인라인 방향이 왼쪽에서 오른쪽입니다. RTL에서는 오른쪽에서 왼쪽입니다. 세로 쓰기 모드에서는 위에서 아래가 됩니다.

writing-mode는 텍스트 흐름의 기본 방향을 설정합니다.

• horizontal-tb — 가로 텍스트, 위에서 아래(기본값)
• vertical-rl — 세로 텍스트, 오른쪽에서 왼쪽으로 열이 배치됨
• vertical-lr — 세로 텍스트, 왼쪽에서 오른쪽으로 열이 배치됨

writing-mode: horizontal-tb(기본값)에서는 다음과 같습니다.

• 블록 방향 = 세로(위쪽 → 아래쪽)
• 인라인 방향 = 가로(LTR에서는 왼쪽 → 오른쪽, RTL에서는 오른쪽 → 왼쪽)
• 블록 시작 = 위쪽, 블록 끝 = 아래쪽
• 인라인 시작 = 왼쪽(LTR) 또는 오른쪽(RTL)

writing-mode: vertical-rl에서는 다음과 같습니다.

• 블록 방향 = 가로(오른쪽 → 왼쪽)
• 인라인 방향 = 세로(위쪽 → 아래쪽)
• 블록 시작 = 오른쪽, 블록 끝 = 왼쪽
• 인라인 시작 = 위쪽, 인라인 끝 = 아래쪽

쓰기 모드에 따라 회전하는 좌표계라고 생각하면 됩니다. 논리적 속성은 고정된 화면이 아니라 회전할 수 있는 이 좌표계를 기준으로 위치를 설명합니다.

세로 쓰기 모드에서는 text-orientation이 개별 문자의 방향을 제어합니다.

• mixed: 라틴 문자는 회전하고 CJK 문자는 똑바로 유지함
• upright: 모든 문자를 똑바로 표시함(세로 CJK에 사용)
• sideways: 모든 문자를 옆으로 회전함

실용적인 예로, 가로 쓰기 맥락에서 회전된 사이드바 레이블이나 차트 축 레이블에 사용할 수 있습니다.

컨테이너에는 하나의 쓰기 모드를 지정하고 개별 인라인 요소에는 다른 쓰기 모드를 지정할 수 있습니다. 이는 같은 단락에서 라틴 문자와 CJK 텍스트를 혼합할 때 사용합니다.

너비와 높이에 해당하는 논리적 속성은 다음과 같습니다.

• inline-size = horizontal-tb에서의 너비(인라인 크기)
• block-size = horizontal-tb에서의 높이(블록 크기)

숫자나 약어가 포함된 세로 텍스트에서 text-combine-upright(tcy)는 짧은 문자 시퀀스를 똑바로 유지하고 하나의 세로 텍스트 셀 안에 압축합니다.

LTR 언어에서 writing-mode: horizontal-tb를 사용하면 어느 축이 "블록" 축인가요?

블록 축은 블록 상자가 쌓이는 방향이고, 인라인 축은 텍스트가 흐르는 방향입니다. 가로 쓰기 문자 체계에서는 블록이 세로이고 인라인이 가로입니다. 세로 쓰기에서는 이 방향이 서로 바뀝니다. writing-mode가 기본 축 방향을 제어합니다. 논리적 속성은 현재 블록 축과 인라인 축이 무엇인지에 맞게 조정됩니다.