CSSの新機能！ テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方

テキストが複数行のときに、行ごとの文字数を同じにしてバランスを自動調整するCSSの新機能「text-wrap: balance;」が、Chromeでサポートされました。

日本語だと複数行の文字数を同じにしたいということは少ないと思いますが、見出しやコピーなどで文字数を揃えたいときに使えます。まぁ使ってもかなりピンポイントになるでしょう。

text-wrap: balance;の基礎知識と使い方、注意点を紹介します。

CSS text-wrap: balance
by Adam Argyle

下記は各ポイントを意訳したものです。
※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。

• text-wrap: balance;とは
• テキストのバランスを見つける
• 制限事項
• ブラウザが使用している技術の簡単な説明

text-wrap: balance;とは

先日アップデートされたChrome 114ではCSS Text Level 4のtext-wrap: balance;がサポートされました。

See the Pen
Animated comparison of balanced and unbalanced headlines by web.dev (@web-dot-dev)
on CodePen.

2023年現在、text-wrap: balance;のサポートブラウザは下記の通りです。Chrome, Edge, Operaでサポートされており、Safari, Firefoxはまだサポートされていません。

未サポートブラウザでは自動調整をしないだけなので、特に問題はないでしょう。

text-wrap: balance;のサポートブラウザ

text-wrap: balance;がなかったこれまでは、テキストの行のバランスを調整する方法がほとんどありませんでした。<wbr>や­で改行位置や単語をより賢明にするのがベストな選択肢でした。

しかし、デベロッパーは見出しや段落の最終的なサイズ・フォントサイズ、使用される言語さえも不明な場合があります。テキストの折り返しを美しく処理するために必要な変数はブラウザにあります。そのため、下記のように見出しが折り返して表示されます。

デモページ

CSSは、下記の通りです。

CSS Text Level 4のtext-wrap: balance;を使用すると、テキストに最適なバランスのとれた折り返しをするようにブラウザに要求できます。ブラウザはフォントサイズ・言語などのすべての要素を認識して、バランスのとれた折り返しを実行します。

デモページ

CSSは、下記の通りです。

デベロッパーツールの情報を重ねずに、並べてみるとその違いがよく分かると思います。

上: text-wrap: balance;なし、下: text-wrap: balance;あり

テキストのバランスを見つける

見出しはビジターが最初に目にする要素で、視覚的に魅力的で読みやすいものである必要があります。そのため、視覚的に魅力的で、読みやすい見出しであることが求められます。優れたタイポグラフィはビジターに自信を与え、読み続けることを促します。

これまでは、テキストのバランスを調整するデザイナーは数値的なものではなく、視覚的な見た目で作業をしていました。この話題はメトリックアライメントや光学的アライメントと呼ばれることがあります。ニューヨークタイムズのような大規模な出版物では、見出しのバランスは非常に重要なユーザーエクスペリエンスのディテールです。

See the Pen
Balanced hero headline component by web.dev (@web-dot-dev)
on CodePen.

メイン記事のテキストは目立たせたり、ビジターの目を引く必要がないため、バランスを取ることは一般的ではありません。

タイポグラフィにおけるテキストのバランス調整は、印刷会社が文字を手作業で配置していた印刷の初期にさかのぼります。しかし、ツールやテクニックが進化するにつれて、その結果も進化しました。最近では、デザイナーはカラーやウェイトやサイズを使用してテキストをバランスよく配置しています。

しかし、Web上ではユーザーによってドキュメントのサイズやカラーが変わるため、それらをコントロールすることができません。text-wrap: balance;は印刷業界のデザイナー仕事と伝統に基づいて、テキストのバランスをとる記述を自動化した方法でWebにもたらします。

見出しのバランスをとる

これは、text-wrap: balance;の主な使用例になり、そうあるべきです。大きさで視線を集め、左右対称で読みやすいようにします。

このCSSを適用しただけでは期待した結果が得られないことがあるかもしれません。テキストは折り返す必要があるため、どこかに最大行長が適用されるからです。この記事のデモではmax-inline-sizeが設定されているのが分かると思います。このプロパティはmax-widthに似ていますが、どの言語に対しても一度に設定することができます。

制限事項

テキストをバランスよく配置するのは、自由ではありません。ブラウザは最適なバランスの取れた折り返し方法を見つけるために繰り返しループする必要があります。このパフォーマンスコストは4行以下の折り返しに対してのみ機能するルールによって軽減されます。

See the Pen
Trying to balance more than 4 lines by web.dev (@web-dot-dev)
on CodePen.

パフォーマンスに関する考慮事項

ページ上のすべてのテキストにtext-wrap: balance;を適用することはお勧めしません。4行の制限があるため、これは無駄なリクエストになり、ページのレンダリング速度に影響を与える可能性があります。

この機能の大きな利点は、JavaScriptでやっていたかもしれないテキストの折り返しやフォントの読み込みのバランスを調整するために時間をかけて待つ必要がないことです。ブラウザが引き受けてくれます！

white-spaceプロパティとの相互作用

このテキストのバランス調整は、white-spaceプロパティと競合します。これは一方が折り返しなしを要求し、もう一方がバランスのとれた折り返しを要求するからです。この問題はwhite-spaceを解除することで解決できます。

バランスを調整しても要素のインラインサイズは変わりません

JavaScriptを使用したソリューションの中には、含まれる要素自体のmax-widthを変更するものがあります。これはバランスのとれたブロックに「シュリンクラップ」されるという追加のボーナスがあります。text-wrap: balance;にはこの効果はなく、下記の例でそれが確認できると思います。

デモページ

デベロッパーツールで表示される幅に余分なスペースがあることが分かります。これはサイズ変更のスタイルではなく、折り返しのみのスタイルだからです。そのため、text-wrap: balance;が適していないシナリオがあります。たとえば、カード（またはボーダーやシャドウがあるコンテナ）内の見出しなどです。

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

ブラウザでは、CSSの1ピクセル（表示ピクセルではない）で停止し、追加行を発生させない最小幅のバイナリ検索を効果的に実行します。バイナリ検索のステップを最小限に抑えるために、ブラウザは平均線幅の80%から開始します。