見出しの最後の一語だけ残る？text-wrap: balanceで改行の偏りを比べよう

見出しが二行に折り返されたとき、最後の短い言葉だけが次の行に残っていないかな。文字を小さくする前に、行の長さの偏りを調整するCSSのtext-wrap: balanceを試せるよ。

今回は同じ文章・文字サイズ・表示幅をそろえ、通常の折り返しとbalanceを比べる。記事下の作例はブラウザだけで動き、入力内容の保存や外部への送信は行わない。

balanceは、文字の大きさではなく折り返しを調整する

通常の折り返しでは、行に入るところまで文字が並び、残りが次の行へ送られる。balanceは、複数行の長さがなるべく釣り合うよう、ブラウザが改行位置を調整する指定だよ。

.article-title {
  max-inline-size: 20rem;
  font-size: 1.5rem;
  text-wrap: balance;
}

この指定自体が文字サイズや字間を変えるわけではない。max-inline-sizeは、横書きなら主に幅の上限を指定するもの。見出しの箱を広げる設定と、箱の中の折り返しを整える設定は分けて考えよう。

同じ幅で、二つの見出しを見比べよう

ページ内の作例には、同じ文章の見出しが二つある。上はtext-wrap: wrap、下はtext-wrap: balance。比較する前に、両方が同じ幅であることを確認しよう。狭い画面では画面内に収まる幅へ制限するため、作例に表示した実際の幅も見よう。

1. 「見出しの幅」を280pxにする。
2. 下の表示方法をbalanceにして、最後の行の文字数や空き方を比べる。
3. 幅を210px、360pxへ変え、同じ文章でも改行の違いが変わるか見る。
4. 表示方法をwrapに戻し、同じ条件での違いを確認する。

作例には、各行の文字の範囲から測った幅も出している。数字は検証の補助であり、読みやすさの点数ではない。句読点や意味のまとまりも含め、見出しとして自然に読めるかを見よう。

幅によっては二つの見た目がほとんど変わらないこともある。「指定したら必ず一行減る」「最後の行が必ず同じ長さになる」という機能ではないんだ。

長い本文へ一律に付ける前に

MDNは、行の長さを均す計算には負荷があり、balanceの対象となる行数にブラウザごとの制限があると説明している。短い見出しや短文の導入から試すほうが、変化を確認しやすいよ。

長い本文、頻繁に編集する文字、価格や商品名など途中で切りたくない表記まで、一括指定だけで整うとは限らない。手動のbrや、折り返さない指定が先に入っている場合も、そちらを含めて点検しよう。

対応していないブラウザ向けには、基本の折り返しが使える状態を残す。作例でもCSS.supports('text-wrap', 'balance')を表示し、対応状況と見た目の両方を確かめられるようにしている。

変わらないときに確認すること

まず見出しが本当に複数行になっているか、表示幅や文章が比較対象と同じかを見る。次に、対応表示と、実際に適用されたtext-wrapの値を確認する。幅を変えすぎて一行になった場合は、改行位置の比較そのものができなくなるよ。

「最初の状態へ戻す」で幅280px・balanceへ戻せる。編集部ではChromiumで、表示方法の切替、幅の変更、行の幅の測定、リセットを確認した。別ブラウザまで同一の改行になることを保証する結果ではないよ。

本文の読みやすい幅は一行の長さとch、拡大したときの崩れはズームとリフローの確認も合わせて見てみよう。