- writing-mode
텍스트가 가로 또는 세로로 표시되는지 여부를 나타낸다.
ex) writing-mode: vertical-rl
writing-mode 속성에 가능한 3가지 값
- horizontal-tb: 블록의 표시 방향: 위에서 아래, 문장은 가로로 표시
- vertical-rl: 블록의 표시 방향: 오른쪽에서 왼쪽, 문장은 수직으로 표시
- vertical-lr: 블록의 표시 방향: 왼쪽에서 오른쪽, 문장은 수직으로 표시
실제로 페이지에서 블록 수준 element가 표시되는 방향을 설정한다.
writing mode & block, inline layout
텍스트를 가로로 표시하는 쓰기 모드 경우 -> block은 페이지의 맨 위에서 아래로만 표시된다.
writing mode를 전환하면 block 방향과 inline 방향을 변경한다.
horizontal-tb -> block 방향은 위에서 아래로 진행된다.
vertical-rl -> block 방향은 오른쪽에서 왼쪽으로 수평으로 표시된다.
block-size는 항상 writing mode에서 페이지에 표시되는 방향의 block의 크기이다.
inline-size는 항상 text가 표시되는 방향이다.
horizontal writing mode
vertical writing mode
logical property and values
가로 쓰기 모드인 경우 width에 매핑된 속성: inline-size, height에 매핑된 속성: block-size
logical margin, border, padding
margin-top 속성은 margin-block-start에 매핑된다.
-> 항상 block size의 시작에서 margin을 나타낸다.
padding-left 속성은 inline 방향의 시작 부분에 적용되는 padding-inline-start에 매핑된다.
-> writing mode에서 text가 시작되는 곳이다.
border-bottom 속성은 block size 끝의 경계인 border-block-end에 매핑된다.
logical values
pysical -> logical mapping
top -> block-start
right -> inline-end
bottom -> block-end
left -> inline-start
