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

CSS には、バランスの取れたテキスト ブロックのために改行を手動で作成する、古典的なタイポグラフィ技術があります。

Adam Argyle

text-wrap の balance 値は CSS テキスト レベル 4 の一部です。この投稿の例をご覧ください。 この CSS 1 行でテキスト レイアウトを大幅に改善できます。

text-wrap: balance を使用しない場合。デザイナー、コンテンツ編集者、 いくつかのツール 線のバランスのとり方を変えて..利用可能な最適なオプションは、 <wbr> または ­ の支援 テキスト レイアウトをガイドし、行や単語の区切りを的確に判断できる

デベロッパーは、画像の最終的なサイズ、フォントサイズ、さらには言語さえも 見出しまたは段落効果的で美しいデザインを実現するために必要となるすべての変数 ブラウザ内で行われます。見出しとして表示されるのは 次の画像のようにラップします。

</ph> <ph type="x-smartling-placeholder">

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

CSS Text 4 の text-wrap: balance を使用すると、ブラウザに以下をリクエストできます。 最適なバランスの取れた行の折り返しソリューションを見つけます。ブラウザ 認識しているということです。 ブラウザのバランス重視でテキストを折り返す結果は次のようになります。

</ph> <ph type="x-smartling-placeholder">

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

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

制限事項

テキストのバランスを調整するタスクは有料ではありません。ブラウザは イテレーションを繰り返して、最適なバランスの取れたラッピング ソリューションを見つけます。このパフォーマンス ルールによって軽減される場合、ラップされた 6 行以下の行に対してのみ機能します。

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

デザイン全体にテキストの折り返しのバランスをとることはおすすめしません。Google 最大 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% です。