AAtomic CSS

text-orientation

세로 쓰기 모드에서 글자 하나하나를 세울지 눕힐지 결정합니다. 줄이 흐르는 방향은 writing-mode가 정하고, 그 줄 안에서 글리프의 각도는 이 속성이 정합니다.

클래스 목록

클래스CSS설명
tomtext-orientation: mixed혼합 (CJK 직립, 라틴 회전)
toutext-orientation: upright모든 문자 직립
tosrtext-orientation: sideways-right오른쪽으로 눕힘
tostext-orientation: sideways옆으로 눕힘

시각 데모

네 칸 모두 wmvr로 세로쓰기를 켠 같은 문장이며, 방향 클래스만 다릅니다. 한글과 라틴 문자, 숫자가 각각 어떻게 놓이는지 비교해 보세요.

mixed — tom

세로쓰기 CSS 2026

한글은 세워지고 라틴 문자와 숫자는 눕습니다.

upright — tou

세로쓰기 CSS 2026

라틴 문자와 숫자까지 전부 세워집니다.

sideways — tos

세로쓰기 CSS 2026

모든 글자를 통째로 90도 눕힙니다.

sideways-right — tosr

세로쓰기 CSS 2026

sideways와 같은 결과이며, 이름만 다른 별칭에 가깝습니다.

<!-- The four columns above -->
<div class="wmvr tom h20rem">...</div>
<div class="wmvr tou h20rem">...</div>
<div class="wmvr tos h20rem">...</div>
<div class="wmvr tosr h20rem">...</div>

클래스별 상세

tomtext-orientation: mixed

기본값이자 본문에 쓰는 값입니다. 한글·한자·가나는 세운 채로 두고, 라틴 문자와 숫자는 시계 방향 90도로 눕혀 단어를 읽을 수 있게 유지합니다. 세로쓰기 본문에서 영문 인용이 섞여도 자연스럽게 읽힙니다.

<!-- Vertical body text: the normal choice for CJK -->
<article class="wmvr tom h60rem fs16px lh2">
  ... vertical article body ...
</article>

toutext-orientation: upright

라틴 문자와 숫자까지 전부 세웁니다. 글자가 한 자씩 쌓여 세로 간판이나 책등 라벨 같은 느낌이 납니다. 단어를 읽기는 불편하므로 짧은 라벨에만 쓰세요.

<!-- Book spine label: every glyph stands upright -->
<div class="wmvr tou h30rem fs2rem fw700 ls0-1em">
  ATOMIC CSS
</div>

자간이 세로 간격이 됩니다

upright 상태에서 letter-spacing은 글자 사이의 세로 간격을 벌립니다. 세로 라벨의 답답함을 푸는 데 유용합니다.

tostosrsideways / sideways-right

글자를 CJK까지 포함해 모두 90도 눕힙니다. 세로 줄에 가로 글줄을 통째로 회전시켜 넣은 모양이라 차트 축 라벨처럼 공간이 좁은 곳에 적합합니다. sideways-right는 sideways와 사실상 같은 결과이며, 하위 호환용 별칭입니다.

<!-- Rotated axis label in a chart -->
<span class="wmvr tos fs12px cA1A1AA">
  Requests per second
</span>

실전 예시

writing-mode 클래스와 함께 사용해야 효과가 나타납니다.

<!-- Vertical writing + mixed orientation -->
<div class="wmvr tom">
  Text with mixed Korean and English
</div>

<!-- Vertical writing + all characters upright -->
<div class="wmvr tou">
  ABCDE 12345
</div>

본문 옆에 얇은 세로 라벨을 세우는 패턴이 실무에서 가장 흔합니다.

<!-- Sidebar section marker: a thin vertical rail next to the content -->
<div class="df gap2rem">
  <div class="wmvr tou fs12px ttu ls0-2em cA1A1AA fw700 bl2pxsolid38BDF8 pl12px">
    Chapter 03
  </div>
  <div class="fg1">
    <h2 class="fs2-4rem fw700 cFAFAFA">Vertical typography</h2>
    <p class="fs14px c71717A lh1-8">... body copy ...</p>
  </div>
</div>

팁 / 주의사항

CJK vs Latin

tom(mixed)은 CJK 문자는 직립, 라틴 문자는 회전시킵니다. tou(upright)는 모든 문자를 직립시킵니다.

가로 쓰기에서는 아무 효과가 없습니다

writing-mode가 horizontal-tb인 동안 이 속성은 완전히 무시됩니다. 데모가 안 보인다면 wmvr 같은 세로쓰기 클래스가 빠졌는지 먼저 확인하세요.

transform으로 돌린 것과 다릅니다

rotate(90deg)는 박스를 통째로 회전시켜 레이아웃 크기가 그대로 남지만, 세로쓰기는 글줄 자체가 세로로 흘러 높이만큼 자리를 차지합니다. 줄바꿈과 선택 영역도 정상 동작합니다.

높이를 주지 않으면 줄바꿈이 일어나지 않습니다

세로쓰기에서 줄바꿈 기준은 너비가 아니라 높이입니다. 높이를 지정하지 않으면 문장이 한 줄로 계속 내려가 컨테이너를 뚫고 나갑니다.

writing-modetext-justifytext-alignletter-spacingtypography