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

最適化されたテキスト折り返しをオプトインして、速度よりも美しさ重視に。

Adam Argyle

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

p {
  text-wrap: pretty;
}

https://codepen.io/web-dot-dev/pen/yLGmzLJ

タイポグラフィのWidows and Orphans は、段落またはテキスト ブロックの最後に単独で表示される単語です。ワイドウは、テキスト ブロックの上部に単独で表示される単語で、オーファンはテキスト ブロックの末尾に単独で表示される単語です。目でテキストをざっと確認する際に中断され、コンテンツの読みづらさにつながる可能性があります。一部のデザイナーは、どんな犠牲を払ってもそれを避け、発生しないようにあらゆる努力を払います。

画像は Google Fonts - Widows & Orphans から取得。

Chrome 117 以降では、1 行の CSS（text-wrap: pretty）で孤立した子要素を回避できます。

注: text-wrap: pretty は、CSS の orphans プロパティとは異なります。このプロパティは、CSS のマルチカラム レイアウトを使用する場合に関連します。また、pretty は孤立した行のみを処理し、孤立した行末は処理しません。

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

画像の出典: Why you should remove orphans from your body text。

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

最適な行数を決定するために使用されるアルゴリズムの詳細やパフォーマンスに関する考慮事項については、この機能のエンジニアである Koji Ishii が作成した設計ドキュメントのリンクをご覧ください。

改行に関するその他の改善や提案がございましたら、ぜひお寄せください。Chromium バグトラッカーで問題を報告し、詳細情報と、適切および不適切な改行の例をお知らせください。折り返しご連絡いたします。