Intermediate LevelCSS & Modern Layouts
How does writing-mode enable vertical text layouts in CSS?
❓ Interview Prompt: Explain writing-mode values for vertical text, CJK languages, and creative typography.
The writing-mode property changes the direction in which text and block flow progress:
•
`horizontal-tb` (default): Text flows horizontally, blocks stack top-to-bottom.
•
`vertical-rl`: Text flows vertically, columns stack right-to-left (traditional Japanese/Chinese).
•
`vertical-lr`: Text flows vertically, columns stack left-to-right.
Use Cases:
•
CJK (Chinese, Japanese, Korean) vertical text layouts.
•
Creative sidebar labels or decorative vertical headings.
•
Rotated tab navigation labels.
Code Implementation Example
css
.vertical-label {
writing-mode: vertical-rl;
text-orientation: mixed;
white-space: nowrap;
font-size: 0.875rem;
color: #886f68;
letter-spacing: 0.1em;
}💡Vertical sidebar label using writing-mode.
🎯 Interview Key Takeaway
writing-mode: vertical-rl is essential for CJK typography and creative vertical heading designs.
#Writing Mode#Vertical#Typography#Intermediate
Back to all CSS & Modern Layouts Questions→