ハーフレディング（line-height）

Lism CSSでは、line-height の扱いが独特となっており、ハーフレディングの値でline-heightを管理する仕組みになっています。

ハーフレディングとは、line-heightから文字サイズを除いた上下の余白部分のことです。

仕組み

Lism では、全要素に対し、以下のスタイルが適用されています。

* {
  line-height: calc(1em + var(--hl) * 2);
}

これにより、line-heightの値は、--hl というハーフレディングを指定するための変数に依存する仕組みになっており、 どんな文字サイズのテキストに対しても同じ余白量でレイアウトを組んでいくことが可能です。

トークン

--hl-- でトークンを用意しています。

トークン	変数	初期値
`xs`	`--hl--xs`	`var(--hl-unit)`
`s`	`--hl--s`	`calc(var(--hl-unit) * 2)`
`base`	`--hl--base`	`calc(var(--hl-unit) * 3)`
`l`	`--hl--l`	`calc(var(--hl-unit) * 4)`

上記の--hl-unitは次のように定義されています。

:root {
  --hl-unit: calc(var(--REM) * 0.125); /* ≒ 2px */
}

（--REM ≒ 1rem になっているため、--hl-unit は 2px前後の値となる想定です。）

`lh` クラス

lhクラスの内部でこれらの変数を扱うようにしています。

.-lh\:base {
  --hl: var(--hl--base);
}
.-lh\:xs {
  --hl: var(--hl--xs);
}
.-lh\:s {
  --hl: var(--hl--s);
}
.-lh\:l {
  --hl: var(--hl--l);
}

↓

Preview

1: 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.

xs: 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.

s: 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.

base: 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.

l: 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.

<p class="-lh:xs">Lorem ipsum ...</p>
<p class="-lh:s">Lorem ipsum ...</p>
<p class="-lh:base">Lorem ipsum ...</p>
<p class="-lh:l">Lorem ipsum ...</p>

ハーフレディング管理のメリット

line-heightを1.6などの一般的な値でセットした場合、フォントサイズが大きくなるにつれて、line-heightの値も大きくなってしまいます。

ベースサイズ付近のテキストであればそれでいいのですが、見出しなどになるとこれでは大きすぎて読みづらいという問題が発生してきます。

行間のハーフレディングを、固定値で管理することで、フォントサイズが大きくなってもテキスト間の距離が一定に保たれます。

↓

Preview

H1: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

H2: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

H3: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

H4: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

H5: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

p : ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

s: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

さらに、ハーフレディング除去も簡単になります。

参考: ハーフレディング除去クラス