AAtomic CSS

writing-mode

Sets text flow direction. wmvr for Japanese/Chinese vertical writing, wmvl for vertical labels.

Class List

ClassCSSDescription
wmhtbwriting-mode: horizontal-tbHorizontal, top to bottom (default)
wmvrwriting-mode: vertical-rlVertical, right to left
wmvlwriting-mode: vertical-lrVertical, left to right

Visual Comparison

Compares each writing-mode's effect on text flow.

Horizontal TB (default value) — wmhtb

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

Text flows horizontally, top to bottom

Vertical RL — wmvr

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

Text flows vertically, right to left

Vertical LR — wmvl

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

Text flows vertically, left to right

Class Details

wmhtbwriting-mode: horizontal-tb

Default. Text flows horizontally, blocks stack top to bottom. Standard for most languages.

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

wmvrwriting-mode: vertical-rl

Text flows vertically, lines right to left. For traditional Japanese/Chinese vertical writing.

<!-- 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

Text flows vertically, lines left to right. For vertical labels, side text, design elements.

<!-- 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>

Tips & Notes

width and height swap

In vertical mode, logical axes swap. width = block size (height role), height = inline size (width role).

Vertical label pattern

wmvl for chart Y-axis labels, vertical tab text. More natural than transform: rotate.

wmvr vs wmvl difference

wmvr lines right-to-left (traditional), wmvl lines left-to-right.

directiontext-orientation