Presets

Writing Mode

Horizontal (L to R)Standard horizontal text flow, top to bottom

Vertical (R to L)Vertical text, right to left columns (CJK style)

Vertical (L to R)Vertical text, left to right columns

Sideways (R to L)Text rotated 90 degrees clockwise

Sideways (L to R)Text rotated 90 degrees counter-clockwise

Text Direction

Typography

Font Family

Font Size: 24px

Line Height: 1.6

Letter Spacing: 0px

Container

Width: 300px

Height: 200px

Padding: 20px

Background

Text Color

Show Border

Save / Load

Preview

Text Content

Hello World

Writing Mode Comparison

ABC

Horizontal (L to R)

ABC

Vertical (R to L)

ABC

Vertical (L to R)

ABC

Sideways (R to L)

ABC

Sideways (L to R)

CSS

/* Writing Mode Styles */

.writing-container {
  width: 300px;
  height: 200px;
  padding: 20px;
  background-color: #f8fafc;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  overflow: auto;
}

.writing-text {
  writing-mode: horizontal-tb;
  direction: ltr;
  font-family: system-ui;
  font-size: 24px;
  line-height: 1.6;
}

HTML

<div class="writing-container">
  <p class="writing-text">Hello World</p>
</div>

Writing Mode Reference

Writing Modes

horizontal-tb - Standard horizontal flow
vertical-rl - Vertical, right-to-left (Japanese, Chinese)
vertical-lr - Vertical, left-to-right (Mongolian)
sideways-rl - Rotated 90 clockwise
sideways-lr - Rotated 90 counter-clockwise

Text Orientation

mixed - Natural orientation per script
upright - All characters upright
sideways - All characters rotated

Common Use Cases

Japanese/Chinese vertical text
Arabic/Hebrew RTL layouts
Rotated sidebar labels
Book spine text
Timeline markers

Browser Support

horizontal-tb: All browsers
vertical-rl/lr: All modern browsers
sideways-*: Firefox only (currently)