AAtomic CSS

writing-mode

텍스트의 흐름 방향을 설정합니다. wmvr은 일본어/중국어 세로쓰기, wmvl은 세로 라벨 등에 사용합니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
wmhtbwriting-mode: horizontal-tb가로쓰기, 위에서 아래로 (기본값)
wmvrwriting-mode: vertical-rl세로쓰기, 오른쪽에서 왼쪽으로
wmvlwriting-mode: vertical-lr세로쓰기, 왼쪽에서 오른쪽으로

시각적 비교

각 writing-mode가 텍스트 흐름에 어떤 영향을 주는지 비교합니다.

Horizontal TB (기본값) — wmhtb

텍스트가 흐르는 방향을 확인하세요. Writing mode test.

텍스트가 가로로 흐르고 위에서 아래로 진행

Vertical RL — wmvr

텍스트가 흐르는 방향을 확인하세요. Writing mode test.

텍스트가 세로로 흐르고 오른쪽에서 왼쪽으로 진행

Vertical LR — wmvl

텍스트가 흐르는 방향을 확인하세요. Writing mode test.

텍스트가 세로로 흐르고 왼쪽에서 오른쪽으로 진행

클래스별 상세

wmhtbwriting-mode: horizontal-tb

기본값입니다. 텍스트가 가로로 흐르고, 블록이 위에서 아래로 쌓입니다. 대부분의 언어에서 사용하는 표준 방향입니다.

<!-- Default horizontal writing -->
<div class="wmhtb">
  Standard horizontal text flow.
  Default for most languages.
</div>

wmvrwriting-mode: vertical-rl

텍스트가 세로로 흐르고, 줄이 오른쪽에서 왼쪽으로 진행합니다. 전통 일본어/중국어 세로쓰기에 사용합니다.

<!-- Traditional Japanese vertical writing -->
<div class="wmvr h20rem p2rem bg18181B br8px" lang="ja">
  日本語の縦書きテスト。
  右から左へ行が進みます。
</div>

<!-- Vertical title -->
<div class="df gap2rem">
  <h2 class="wmvr fs2rem fw700 cFAFAFA">Vertical title</h2>
  <p>Body content is placed beside it.</p>
</div>

wmvlwriting-mode: vertical-lr

텍스트가 세로로 흐르고, 줄이 왼쪽에서 오른쪽으로 진행합니다. 세로 라벨, 사이드 텍스트 등 디자인 요소에 활용합니다.

<!-- Vertical label -->
<div class="df aic gap16px">
  <span class="wmvl fs12px cA1A1AA ttu ls0-05em">Label</span>
  <div class="fg1 bg18181B p2rem br8px">
    Content area
  </div>
</div>

<!-- Chart Y-axis label -->
<div class="df aic">
  <span class="wmvl fs14px c71717A">Revenue ($M)</span>
  <div class="fg1 h20rem bg18181B br8px ml8px"></div>
</div>

팁 & 주의사항

width와 height가 바뀜

세로 writing-mode에서는 논리적 축이 바뀝니다. width가 블록 크기(높이 역할), height가 인라인 크기(너비 역할)가 됩니다.

세로 라벨 패턴

wmvl은 차트의 Y축 라벨, 탭의 세로 텍스트 등 디자인 요소에 유용합니다. transform: rotate보다 자연스럽습니다.

wmvr vs wmvl 차이

wmvr은 줄이 오른쪽에서 왼쪽으로 진행(전통 세로쓰기), wmvl은 줄이 왼쪽에서 오른쪽으로 진행합니다.

directiontext-orientation