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

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 なぜなら、1 つはラップなしをリクエストし、もう 1 つは ラップします。この問題を回避するには、空白のプロパティの設定を解除してから、 バランスの取れたラッピングが再度適用されます。

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

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

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

DevTools で表示される幅の最後に、かなりのスペースがあることがわかります。 これは、ラッピングのスタイルであって、サイズ変更のスタイルではないためです。このため、少なくとも私見では、text-wrap: balance がそれほど優れているわけではないシナリオがいくつかあります。たとえば、カード（または任意のコンテナ内）の見出しを （枠線や影など）が使用されます。

バランスのとれたテキストの折り返しは、皮肉なほど、含まれる要素のバランスが取れない原因となります。

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

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