CSS Notes
記事を検索

テキストのハーフレディング（Half-Leading）を除去するCSS

小技Tips紹介です。

段落テキストなどの上下には、line-heightによって文字の上下に余白がある状態が一般的です。 この上下の余った部分の余白を、ハーフレディング（Half-Leading）と呼びます。

この上下の余白があることで、ボックスコンテンツの余白感が揃わないことがよくありあます。

例で確認

↓ padding, gap にどちらも同じ余白を設定しているが、左右と上下で余白感が異なる例

タイトル文字列

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

フッターテキスト

<div class="l--stack -bd -p:30 -g:30 -bdrs:10">
  <h2 class="-fz:l">タイトル文字列</h2>
  <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。</p>
  <p class="-fz:s">フッターテキスト</p>
</div>

※ CSSが書かれていないクラスはLism CSSのものです。

これにガイドラインをつけて確認してみます。

↓ ガイドラインをつけて余白を確認

タイトル文字列

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

フッターテキスト

青色の部分が、paddingおよびgapでできた余白です。
そして、ピンクの部分がテキストコンテンツの上下のハーフレディングによる余白です。

この余白を消そうとした時、line-heightを1にしてしまうと、同じテキストブロック内の改行も狭くなり可読性が下がりますよね。

そうではなく、ハーフレディングを計算してネガティブマージンで打ち消すというアプローチができるので紹介します。

ハーフレディング除去スタイル

.trim-half-leading{
  /* ハーフレディングを lh を使って計算 */
  --half-leading: calc((1lh - 1em) / 2);


  /* ネガティブマージンで打ち消す */
  margin-block: calc(-1 * var(--half-leading));
}

lhとは、要素のline-heightの計算値を表す単位です。 1lhからフォントサイズの1em を引いて2で割った値がハーフレディングの値になります。

Can Use ? lh Chrome 109 (2023/1)~ Safari 16.4 (2023/3)~ Firefox 120 (2023/11)~

実際に使用してみましょう。

↓ ハーフレディングを除去した例

タイトル文字列

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

フッターテキスト

<div class="l--stack -bd -p:30 -g:30 -bdrs:10">
  <h2 class="trim-half-leading -fz:l">タイトル文字列</h2>
  <p class="trim-half-leading">ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。</p>
  <p class="trim-half-leading -fz:s">フッターテキスト</p>
</div>

※ CSSが書かれていないクラスはLism CSSのものです。

コンテンツ上下の余白感も揃っていい感じになりましたね。

英語の場合は、emではなくcapを使って計算してもよさそうです。

--half-leading: calc((1lh - 1cap) / 2);
↓ 英語テキストのハーフレディングを除去した例

Title Text

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.

Footer Text

目次