バランスの取れたテキスト ブロック用に改行を手書きする従来のタイポグラフィ手法が、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% からスタートします。