Writing mode

Basic Concepts of Writing Mode

The CSS3 writing-mode property controls how text is arranged horizontally or vertically. It determines the flow direction of inline content and the stacking order of block-level elements. This property was initially designed to support vertical typesetting for East Asian languages but has since been expanded to accommodate more complex layout needs.

.example {
  writing-mode: horizontal-tb;
}

Main Property Values

writing-mode has five primary values, each altering the text flow direction:

1. horizontal-tb: Default value, text flows horizontally from left to right, lines stack from top to bottom
2. vertical-rl: Text flows vertically from top to bottom, lines stack from right to left
3. vertical-lr: Text flows vertically from top to bottom, lines stack from left to right
4. sideways-rl: Text is oriented sideways, characters rotated 90 degrees clockwise
5. sideways-lr: Text is oriented sideways, characters rotated 90 degrees counterclockwise

.vertical-text {
  writing-mode: vertical-rl;
  height: 200px;
  border: 1px solid #ccc;
}

Practical Applications

Vertical typesetting is common in Chinese, Japanese, and other East Asian scripts. Newspaper headlines, book covers, and traditional signage often use vertical layouts. In modern web design, vertical text can create unique visual effects.

<div class="magazine-title">
  <h2>Spring</h2>
  <p>The season of renewal</p>
</div>

<style>
.magazine-title {
  writing-mode: vertical-rl;
  font-size: 24px;
  line-height: 1.5;
  padding: 20px;
  background: #f5f5f5;
}
</style>

Interaction with Other CSS Properties

writing-mode affects the behavior of multiple CSS properties:

1. text-orientation: Controls character orientation in vertical layouts
2. text-combine-upright: Combines multiple characters into a single unit (e.g., numbers in dates)
3. Box model properties: The meaning of width and height changes based on writing mode

.combined-date {
  writing-mode: vertical-rl;
  text-combine-upright: all;
  font-size: 16px;
}

Applications in Responsive Design

Combined with media queries, writing modes can adapt to screen sizes:

@media (max-width: 600px) {
  .responsive-text {
    writing-mode: vertical-rl;
  }
}

Browser Compatibility Considerations

While modern browsers generally support writing-mode, note:

• sideways-* values are newer additions
• Some older browsers require prefixes
• Test rendering effects across multiple browsers

/* Prefixed syntax for compatibility */
.legacy-support {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

Creative Layout Examples

Combine with Flexbox or Grid for complex multi-directional layouts:

<div class="creative-layout">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<style>
.creative-layout {
  display: flex;
}

.item {
  writing-mode: vertical-lr;
  padding: 10px;
  margin: 5px;
  background: #e0e0e0;
  transform: rotate(180deg);
}
</style>

Internationalization Considerations

Different languages have varying typesetting needs. Right-to-left languages like Arabic may require combining with the direction property:

.arabic-text {
  writing-mode: horizontal-tb;
  direction: rtl;
}

Performance Impact

Frequent changes to writing mode may cause reflows and repaints, especially when used in animations. Best practices include:

• Avoid dynamically changing writing modes in animations
• Use writing modes for static content
• Declare changes in the will-change property

.optimized {
  writing-mode: vertical-rl;
  will-change: transform;
}

Interaction with JavaScript

JavaScript can dynamically control writing modes:

document.getElementById('toggleMode').addEventListener('click', function() {
  const element = document.querySelector('.dynamic-text');
  const currentMode = getComputedStyle(element).writingMode;
  element.style.writingMode = currentMode === 'horizontal-tb' ? 'vertical-rl' : 'horizontal-tb';
});

Applications in Print Media

Vertical layouts can save space in print stylesheets:

@media print {
  .print-vertical {
    writing-mode: vertical-rl;
    page-break-inside: avoid;
  }
}

Common Problem Solving

1. Text overflow handling:

.overflow-handling {
  writing-mode: vertical-rl;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: 100px;
}

2. Mixed-direction text:

<div class="mixed-directions">
  <span class="horizontal">Horizontal text</span>
  <span class="vertical">Vertical text</span>
</div>

<style>
.mixed-directions {
  display: flex;
}
.horizontal {
  writing-mode: horizontal-tb;
}
.vertical {
  writing-mode: vertical-lr;
}
</style>

Advanced Techniques: Combining with Transforms

When basic writing modes don't suffice, combine with CSS transforms:

.transformed-text {
  writing-mode: horizontal-tb;
  transform: rotate(-90deg) translateX(-100%);
  transform-origin: left top;
}