CSS には、バランスの取れたテキスト ブロックのために改行を手動で作成する、古典的なタイポグラフィ技術があります。
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;
}
デバッグ情報をオーバーレイせずに、並べて、静止画像として表示すると便利です。
このバランスの取れたテキスト ブロックには、もっと満足するはずです。目に留まりやすくなり、全体的に読みやすくなります。
バランスを取る
見出しは読者が最初に目にするもので、視覚的に魅力的で読みやすいものである必要があります。これにより、ユーザーの注意を引き、品質と安心感を得ることができます。優れたタイポグラフィは、読者に自信を与え、続きを読む意欲を高めます。
従来、このタスクは手作業または光学的に行われていました。デザイナーはテキストのバランスを調整し、計算ではなく目を楽しませようとしていたからです。このトピックは、指標と光学的位置合わせと呼ばれることもあります。New York Times のような大規模ニュース メディアの場合、ヘッドラインのバランスはユーザー エクスペリエンスの詳細として非常に重要です。
タイポグラフィにおけるテキストのバランス調整は、印刷機が文字を手で配置していた初期の印刷にまでさかのぼります。ツールや手法が進化するにつれて、結果も変化しました。最近のデザイナーは、デザイン内のテキストのバランスを取るために、色、太さ、サイズなどを考慮しています。
ただし、ウェブでは、ユーザーに応じてドキュメントのサイズや色が変更されるため、制御が難しくなります。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% から開始します。