CSS writing-mode Property

Definition and Usage

The writing-mode property sets whether lines of text are laid out horizontally or vertically, and which way block lines stack. It defines the block flow direction and how inline content flows inside a block.

The property is inherited. The initial value is horizontal-tb. For a whole document, set it on the root (html). Pair with direction and text-orientation for finer control.

CSS Syntax

Example: writing-mode: vertical-rl;. Use one keyword at a time.

Property Values

How to Use writing-mode

Pick a flow for the block, then check how logical properties and text orientation behave.

1. Start with horizontal-tb for most Latin layouts.
2. Use vertical-rl or vertical-lr for vertical text (headings, CJK, side labels).
3. For a full page, set writing-mode on html (or the root).
4. Combine with text-orientation when vertical Latin letters need upright or sideways glyphs.

Live Preview

Change writing-mode and watch how the sample text flows and stacks.

CSS Examples

Each snippet focuses on writing-mode with a short sample so the flow is easy to see. Use Try It Yourself for a live editor.

<style>
  div {
    writing-mode: horizontal-tb;
    border: 1px solid #334155;
    padding: 8px;
  }
</style>

<div>
  <p>Example text</p>
  <p>Next line below</p>
</div>

<style>
  div {
    writing-mode: vertical-rl;
    height: 160px;
    border: 1px solid #334155;
    padding: 8px;
  }
</style>

<div>
  <p>Example text</p>
  <p lang="zh">我家没有电脑。</p>
</div>

<style>
  div {
    writing-mode: vertical-lr;
    height: 160px;
    border: 1px solid #334155;
    padding: 8px;
  }
</style>

<div>
  <p>Example text</p>
  <p>Next line right</p>
</div>

Key Takeaways