CSS writing-mode Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The writing-mode CSS property controls the fundamental orientation and flow of inline content and block progression within an element. Instead of simply rotating characters, it redefines the element’s inline axis and block axis - that is, it determines which direction text runs along a line and which direction successive lines are stacked. Because of that axis redefinition, measurements and layout that use logical dimensions are affected: for example, block-size and inline-size map to different physical dimensions depending on the current writing mode, and logical margin/padding/offsets follow those same axes.

This property also interacts closely with typographic controls and bidirectional behavior. The way individual glyphs are oriented and whether vertical forms or rotated punctuation are used is influenced by text-orientation, while overall text directionality and embedding behavior remain governed by direction and unicode-bidi. It’s important to note the difference between changing the writing axis and visually rotating content: using transform to rotate an element does not change the underlying inline/block axes and therefore does not change how logical properties behave; writing-mode changes layout semantics rather than applying a simple visual rotation.

In practical terms, choosing a non-default writing mode affects line breaking, baseline alignment, and how UI components should be positioned and sized; controls and compositions that assume horizontal inline flow may need adaptation. It also matters for internationalization and accessibility: while writing-mode changes visual layout, it does not change DOM order or semantics - assistive technologies still read content in DOM order, so ensure source order matches the intended reading order when that matters. Finally, typographic support (fonts that supply vertical glyph variants, punctuation handling) and careful testing across combinations of writing mode and other layout features are essential to get predictable, legible results.

Definition

Initial value: horizontal-tb
Applies to: All elements except table row groups, table column groups, table rows, and table columns
Inherited: Yes
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.writingMode

Interactive Demo

writing-mode: horizontal-tb;

writing-mode: vertical-lr;

writing-mode: vertical-rl;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.

Syntax

writing-mode: horizontal-tb | vertical-rl | vertical-lr

Values

horizontal-tbTop-to-bottom block flow direction. The writing mode is horizontal.
vertical-rlRight-to-left block flow direction. The writing mode is vertical.
vertical-lrLeft-to-right block flow direction. The writing mode is vertical.

Example

HTML

<div class="wrapper">

  <h1>CSS writing-mode demo</h1>

  <div class="grid">

    <section class="box horizontal">

      <div class="label">horizontal-tb</div>

      <p>Example text  -  The quick brown fox jumps over the lazy dog.</p>

    </section>



    <section class="box vertical-rl">

      <div class="label">vertical-rl</div>

      <p>Example text  -  The quick brown fox jumps over the lazy dog.</p>

    </section>

  </div>

</div>

CSS

/* Basic page styles */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin: 24px;
  background: #f7f7fb;
  color: #111;
}

.wrapper h1 {
  font-size: 18px;
  margin: 0 0 12px 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.box {
  background: white;
  border: 1px solid #e0e4e8;
  border-radius: 8px;
  padding: 12px;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.box .label {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 12px;
  color: #555;
}

.box p {
  margin: 0;
  line-height: 1.4;
}

/* writing-mode examples */
.horizontal {
  writing-mode: horizontal-tb; /* default left-to-right, lines flow top-to-bottom */
}

.vertical-rl {
  writing-mode: vertical-rl; /* lines flow top-to-bottom, columns right-to-left */
  text-orientation: mixed; /* preserve upright Latin letters when possible */
}

/* Improve appearance for vertical blocks */
.vertical-rl p {
  white-space: normal;
  max-width: 12ch;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS writing-mode property. Hover over a browser icon to see the version that first introduced support for this CSS property.