is--vertical

is--vertical は、要素に縦書きモード（writing-mode）を適用するモジュールクラスです。

縦書き用の値は、トークン（--vertical-mode）で管理しています。これにより、lang属性に合わせて変数を上書きすることで、vertical-rlかvertical-lrを切り替えることができるようにもなっています。

レスポンシブ対応として、特定のブレイクポイント以上でのみ縦書きにするバリエーションも用意されています。

クラス名	説明
`is--vertical`	常に縦書きモードにする
`is--vertical@sm`	smサイズ以上で縦書きにする
`is--vertical@md`	mdサイズ以上で縦書きにする

is--vertical@[sm|md]を使う場合は、.set--bpクラスを併用する必要があります。

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

smサイズ以上で縦書きにする例

↓

smサイズ以上で縦書きにする例

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

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>