TypographyWriting Mode
Behind the Scenes 🎉

Writing Mode

Set whether lines of text are laid out horizontally or vertically.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

Usage

Horizontal Top to Bottom

Initial value

Sphinx of black quartz, judge my vow.

<div class="fs-md wm-htb c-slate">
    <p>Sphinx of black quartz, judge my vow.</p>
</div>

Vertical Right to Left

Sphinx of black quartz, judge my vow.

<div class="fs-md wm-vrl c-slate h-32">
  <p>Sphinx of black quartz, judge my vow.</p>
</div>

Vertical Left to Right

Sphinx of black quartz, judge my vow.

<div class="fs-md wm-vlr c-slate h-32">
  <p>Sphinx of black quartz, judge my vow.</p>
</div>

Sideways Right to Left

Sphinx of black quartz, judge my vow.

<div class="fs-md wm-srl c-slate h-32">
  <p>Sphinx of black quartz, judge my vow.</p>
</div>

Sideways Left to Right

Sphinx of black quartz, judge my vow.

<div class="fs-md wm-slr c-slate h-32">
  <p>Sphinx of black quartz, judge my vow.</p>
</div>

Responsive Design

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:wm-[value]
Small≥640px
md:wm-[value]
Medium≥768px
lg:wm-[value]
Large≥1024px
xxl:wm-[value]
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:wm-[value]