[CSS] Writing Mode

📢 들어가며

기본 CSS를 사용하는 경우 텍스트는 왼쪽에서 오른쪽으로, 위에서 아래로 흐르는 레이아웃을 가지게 된다.

하지만 일본어나 중국어의 세로쓰기를 구현하거나, 아랍어처럼 오른쪽에서 왼쪽으로 쓰는 언어를 지원해야 할 때, 또는 독특한 디자인을 위해 텍스트 방향을 바꾸고 싶을 수 있다. CSS의 writing-mode는 이런 다양한 텍스트 방향을 자유롭게 제어할 수 있게 해주는 속성이다.

 

 

⚽ Writing Mode

CSS 의 writing-mode속성은 아래와 같은 특징을 갖는다.

• 텍스트의 진행 방향(인라인 방향)과 블록의 배치 방향(블록 방향)을 정의할 때 사용한다.
• 이는 단순히 텍스트를 회전시키는 transform: rotate()와는 다르다
• writing-mode는 텍스트 흐름 자체를 바꾸며, 레이아웃에 직접적인 영향을 미친다.
• 컨테이너의 크기 계산, overflow 방향, 스크롤 방향까지 함께 변경되어 진정한 의미의 쓰기 방향 전환이 가능하다.

writing-mode는 텍스트에만 영향을 주는 것이 아니다!!

 

 

🛒 주요 속성

writing-mode 속성은 '-' 를 기준으로 [텍스트방향]-[블록방향] 을 나타낸다.

 

horizontal-tb 속성은 horizontal이라서 텍스트가 수평으로 배치가 되고, 블록이 top에서 bottom 방향으로 배치된다.

 

horizontal-tb 속성은 기본값이기 때문에 아래 결과를 보면  일반적으로 사용되는 레이아웃으로 보인다.

See the Pen Untitled by suld2495 (@suld2495) on CodePen.

 

vertical-rl 속성은 vertical이라서 텍스트가 수직으로 배치가 되고, 블록이 right에서 left 방향으로 배치된다.

 

아래 결과를 보면 텍스트가 90도 회전이 된것 처럼 수직으로 배치가 된다. 한글의 경우에는 정방향이다.

그리고 블럭이 오른쪽에서부터 왼쪽방향으로 배치가 되고 있다.

See the Pen Untitled by suld2495 (@suld2495) on CodePen.

 

vertical-lr 속성은 vertical이라서 텍스트가 수직으로 배치가 되고, 블록이 left에서 right방향으로 배치된다.

 

아래 결과를 보면 블럭이 왼쪽에서부터 오른방향으로 배치가 되고 있다.

See the Pen Untitled by suld2495 (@suld2495) on CodePen.

 

sideways-rl/lr  속성은 기본 세로 쓰기로 적용되는데, 문자의 구분 없이 모두 회전시킨다.

 

sideways-lr 인 경우 시계방향으로 90도 회전시킨것처럼 보인다.

See the Pen Untitled by suld2495 (@suld2495) on CodePen.

 

sideways-rl 인 경우 문자 구분 없이 회전 시킨다는 점을 제외하면 vertical-rl과 유사한 결과를 보여준다.

See the Pen Untitled by suld2495 (@suld2495) on CodePen.

text-align 속성도 hoizontal, vertical에 따라 기준이 변경된다.
✅ hoizontal의 경우 수평 기준
✅ vertical의 경우 수직 기준

 

 

🎈 text-orientation

writing-mode를 통해 세로 쓰기 속성을 적용하는 경우 text-orientation과 함께 사용해서 텍스트의 방향을 원하는 방식대로 사용할 수 있다. 

writing-mode가 vertical인 경우에만 적용된다.

 

기본값은 mixed이다. 

 

• 한글/한자/일본어: 정방향 유지 (회전 안 함)
• 영문/숫자: 시계방향 90도 회전

 

upright 속성을 사용하는 경우 회전 시키지 않고 정방향을 유지한다.

아래 결과를 보면 영문도 정방향으로 보이는 것을 확인할 수 있다.

See the Pen Untitled by suld2495 (@suld2495) on CodePen.

 

sideways 속성을 사용하는 경우 문자 상관없이 회전 시킨다.

아래 결과를 보면 한글도 회전되는것을 확인할 수 있다.

See the Pen Untitled by suld2495 (@suld2495) on CodePen.

 

 

🎭 Writing Mode와 Flex 속성

writing-mode는 단순히 텍스트의 방향을 결정하는 속성이 아니라 전체 레이아웃의 축을 변경한다. 그래서 flexbox의 주축(main axis)과 교차축(cross axis) 방향에도 직접적인 영향을 준다.

 

아래의 코드에서 div에 flexbox와 writing-mode를 vertical로 설정하였다.

direction을 기본값인 row로 사용하고 있음에도 불구하고 세로로 배치되는 것을 확인할 수 있다.

See the Pen Untitled by suld2495 (@suld2495) on CodePen.

 

 

🎯 정리

• Writing-mode는 단순 텍스트 방향이 아닌 전체 레이아웃의 축을 변경하는 속성이다.
• Flexbox, Grid의 축 방향과 블록 배치 방향까지 함께 바뀐다.
• 한글/한자와 영문/숫자의 회전 방식이 다르므로 다국어 지원 시 주의가 필요하다.
• text-orientation으로 세로쓰기 모드에서 문자 회전을 세밀하게 제어할 수 있다.