is--vertical

is--vertical is a module 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

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。

リサイズ可能

<div class="is--vertical@sm set--bp l--flow set--gutter -py:20 -w:100% -h" style="--h: 20em">
  <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
  <p>
    Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、決するための答えというより、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。
  </p>
</div>

<Flow set="gutter" py="20" w="100%" h="20em" className="is--vertical@sm set--bp">
  <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
  <p>
    Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。作業が進むにつれて、工夫や考えとともに関心が折り重なりながらも、必要以上に主張せず彼らの作品は私たちに一定の示唆を与えてくれます。
  </p>
</Flow>