CSS テキストの折り返し: バランス

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

Adam Argyle

text-wrap の balance 値は CSS Text Level 4 の一部です。この投稿の例を見て、この 1 行の CSS によってテキスト レイアウトを大幅に改善する方法を確認してください。

対応ブラウザ

• 114
• 114
• 121
• 17.5

ソース

デモを試す

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;
}

バランシングによって要素のインライン サイズは変更されない

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

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

テキストの折り返しを皮肉に繰り返すと、含まれる要素のバランスが取れません。

ブラウザで使用されている手法の簡単な説明

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