CSS テキストの折り返し: きれい

テキストの折り返しを最適化して、スピードより美しさを優先。

Adam Argyle
Adam Argyle

Chrome 117 以降では、CSS Text Level 4 の新しいテキストの折り返し機能 text-wrap: pretty を使用できます。

p {
  text-wrap: pretty;
}
https://codepen.io/web-dot-dev/pen/yLGmzLJ

タイポグラフィによる未亡人と孤児の言葉は、段落またはテキスト ブロックの最後にある 1 つの単語です。ウィドウはテキスト ブロックの一番上にある単語だけで、孤立はテキスト ブロックの最後に単独で存在します。人間の目がテキストを見落とすのを妨げて、コンテンツが読みにくくなる可能性があります。設計者によっては、何としても回避し、何とかして防止しようとします。

孤児や未亡人がいない同じ段落と比べて、最初が未亡人、最後に孤児がいる段落が示されています。
画像提供元: Google Fonts - Widows & Orphans

Chrome 117 以降、1 行の CSS で孤立を避けることができます(text-wrap: pretty)。

この機能は、段落が 1 つの単語で終わらないようにするだけでなく、ハイフンでつないだ行が段落の末尾に連続して表示される場合にハイフネーションを調整したり、スペースを空けるために前の行を調整したりします。また、テキストの配置に合わせて適切に調整されます。text-wrap: pretty は一般的に、行の折り返しやテキストの区切りを改善するためのもので、現在は孤立に重点が置かれています。今後、text-wrap: pretty はさらに改善される可能性があります。

孤児がある段落と、孤児のない段落の比較。それぞれに悪いか良いかのバッジが付いている。
本文から孤立情報を削除すべき理由からの画像です。

また、text-wrap: balance もあります。これは、孤立を防ぐものではありませんが、調和のとれたテキスト ブロックを作り出すようにテキストを折り返します。個人的には、見出しには balance、段落には pretty を使用しています。

最適な行数を判断するために使用されるアルゴリズムやパフォーマンスに関する考慮事項に関心をお持ちの場合は、機能、Koji Ishii の背後にあるエンジニアが作成した設計ドキュメントへのリンクをご覧ください。

改行の改善や提案が他にもありましたら、ぜひお聞かせください。Chromium バグトラッカーで問題の詳細、適切な改行の例と不適切な例をお知らせください。折り返しご連絡いたします。