CSS text-wrap: balance

バランスの取れたテキスト ブロックのために手動で改行を挿入する古典的なタイポグラフィ技術が CSS に導入されました。

Adam Argyle

text-wrap の balance 値は、CSS テキスト レベル 4 の一部です。この記事の例を見て、この 1 行の CSS でテキスト レイアウトを大幅に改善する方法をご確認ください。

text-wrap: balance がない場合、デザイナー、コンテンツ エディタ、パブリッシャーは、行のバランスを調整するためのツールをほとんど使用できません。最適な方法は、<wbr> または ­ を使用して、テキスト レイアウトをよりスマートな行と単語の分割位置の決定に導くことです。

開発者は、見出しや段落の最終的なサイズ、フォントサイズ、言語さえもわかりません。テキストの折り返しを効果的かつ美しく処理するために必要なすべての変数はブラウザにあります。そのため、次の画像のように見出しが折り返されます。

.unbalanced {
  max-inline-size: 50ch;
}

CSS Text 4 の text-wrap: balance を使用すると、ブラウザにテキストの最適なバランスの行折り返しソリューションを計算するようリクエストできます。ブラウザは、フォントサイズ、言語、割り当てられた領域などのすべての要素を認識しています。ブラウザのバランスの取れたテキストの折り返しの結果は、現在次のようになっています。

.balanced {
  max-inline-size: 50ch;
  text-wrap: balance;
}

デバッグ情報が重なっていない静止画像を並べて表示すると、比較しやすくなります。

バランスの取れたテキスト ブロックは、見た目にも優れています。注目を集めやすく、全体的に読みやすくなります。

バランスを取る

見出しは読者が最初に目にするものなので、視覚的に魅力的で読みやすいものにする必要があります。これにより、ユーザーの注意を引き、品質と信頼性をアピールできます。優れたタイポグラフィは読者に安心感を与え、読み進めてもらうことができます。

従来、このタスクは手作業または光学的に行われていました。デザイナーは、数学ではなく視覚的にテキストのバランスを取りたいと考えているためです。このトピックは、指標と光学アライメントの比較と呼ばれることがよくあります。ニューヨーク タイムズのような大規模なパブリケーションでは、見出しのバランスはユーザー エクスペリエンスにおいて非常に重要な詳細です。

タイポグラフィのテキストのバランス調整は、印刷の初期に印刷業者が手作業で文字を配置していた時代にまで遡ります。ツールと手法の進化に伴い、結果も進化しました。最近では、デザイナーは色、太さ、サイズなどを使用して、デザイン内のテキストのバランスを取っています。

ただし、ウェブでは、ドキュメントのサイズや色がユーザーに基づいて変化するため、利用できる制御が少なくなります。text-wrap: balance は、印刷業界のデザイナーの作業と伝統に基づいて、テキストのバランス調整の技術を自動化された方法でウェブにもたらします。

バランスの見出し

これは text-wrap: balance の主なユースケースになります。サイズで目を引き、対称で読みやすいようにします。次の CSS を使用して、すべての見出しのテキストの折り返しをバランスの取れた状態に設定します。

h1,h2,h3,h4,h5,h6 {
  text-wrap: balance;
}

このスタイルを適用するだけでは、期待どおりの結果が得られない場合があります。テキストを折り返す必要があるため、どこかで最大行の長さが適用されている必要があるからです。この投稿の例では max-inline-size が設定されています。このスタイルは max-width に似ていますが、任意の言語に対して 1 回だけ設定できます。

制限事項

テキストのバランス調整タスクは無料ではありません。ブラウザは、最適なバランスの取れた折り返しソリューションを見つけるために、イテレーションをループする必要があります。このパフォーマンス コストはルールによって軽減されますが、6 行以下の折り返し行にのみ適用されます。

パフォーマンスに関する注意事項

テキスト折り返しのバランス調整をデザイン全体に適用することはおすすめしません。6 行の制限があるためリクエストが無駄になり、ページのレンダリング速度に影響する可能性があります。

* {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, blockquote {
  text-wrap: balance;
}

この機能の大きなメリットは、JavaScript で現在行っているように、フォントの読み込みに合わせてテキストの折り返しのバランスを調整する必要がないことです。ブラウザが自動的に処理してくれます。

white-space プロパティの操作

テキストのバランス調整は、white-space プロパティと競合します。一方では折り返しなしを要求し、他方ではバランスの取れた折り返しを要求しているためです。この問題を解決するには、空白プロパティの設定を解除します。これにより、バランスの取れた折り返しが再度適用されます。

.balanced {
  white-space: unset;
  text-wrap: balance;
}

バランシングによって要素の inline-size が変更されることはありません

バランスの取れたテキストの折り返しを実現する JavaScript ソリューションの中には、包含要素自体の max-width を変更するものがあり、バランスの取れたブロックに「シュリンク ラップ」されるという利点があります。text-wrap: balance にはこの効果はありません。次の例をご覧ください。

DevTools に表示された幅の末尾に余分なスペースがあるのがわかりますか？これは、サイズ変更スタイルではなく、折り返しスタイルのみであるためです。このため、少なくとも私の意見では、text-wrap: balance があまり適していないシナリオがいくつかあります。たとえば、カード内の見出し（または境界線やシャドウのあるコンテナ）などです。

バランスの取れたテキストの折り返しは、皮肉にも含まれる要素のバランスを崩します。

ブラウザが使用している手法の簡単な説明

ブラウザは、追加の行が発生しない最小の幅を効果的にバイナリ検索し、1 CSS ピクセル（ディスプレイ ピクセルではない）で停止します。バイナリ検索の手順をさらに最小限に抑えるため、ブラウザは平均ラインの太さの 80% から開始します。