is--vertical

is--vertical is a class that applies vertical writing mode (writing-mode) to an element.

The vertical writing value is managed via a token (--vertical-mode). This allows switching between vertical-rl and vertical-lr by overriding the variable according to the lang attribute.

Responsive variants are also available to enable vertical writing only at specific breakpoints and above.

Class name	Description
`is--vertical`	Always applies vertical writing mode
`is--vertical@sm`	Applies vertical writing at sm size and above
`is--vertical@md`	Applies vertical writing at md size and above

When using is--vertical@[sm|md], the .set--bp class must also be applied.

CSS

.is--vertical {
  writing-mode: var(--vertical-mode);
}
.is--vertical\@sm {
  writing-mode: var(--_is_sm) var(--vertical-mode);
}
.is--vertical\@md {
  writing-mode: var(--_is_md) var(--vertical-mode);
}

Usage

Example: vertical writing at sm size and above

↓

Example: vertical writing at sm size and above

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

リサイズ可能

<div class="l--flow is--vertical@sm set--bp set--gutter -py:20 -w:100% -h" style="--h: 20em">
  <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p>
  <p>
    Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.
  </p>
</div>

<Flow set="gutter" py="20" w="100%" h="20em" className="is--vertical@sm set--bp">
  <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p>
  <p>
    Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.
  </p>
</Flow>