`text-wrap: pretty`でより良いタイポグラフィを実現する

• Webタイポグラフィをより美しくする text-wrap: pretty の紹介
• Safari Technology Preview 216 に新たに導入された機能で、Webタイポグラフィをより精密で読みやすく改善する
• 従来のWebテキスト配置は1行ずつ処理する方式だったが、pretty は段落全体を考慮して改行位置を調整する
• この機能は可読性とアクセシビリティを向上させ、伝統的な活字組版の手法に着想を得て実装されている

伝統的なタイポグラフィに学ぶ、良い改行のあり方

• 短すぎる最終行を避ける: 最終行に単語が1つだけ残るのは見た目として好ましくない
• 段落末尾の粗い見た目を改善する: 行末がギザギザだと可読性が下がるため、可能な限りバランスよく調整すべき
• 好ましくないハイフンの使用を避ける: ハイフンが2行連続で使われたり、単語を過度に分割したりすると読みにくい
• タイポグラフィのリバーを防ぐ: 行間の空白が縦に連なって視線を散らす現象は避けるべき

Webにおける改行方式の歴史

• Web は 1991 年から「先頭行から1行ずつ処理する」方式を使ってきた
• この方式では各行のテキスト長を個別に計算し、行同士の調和は考慮しない
• InDesign や LaTeX のようなツールは段落全体を見て行を整えるが、Web では最近までそれができなかった
• Safari Technology Preview 216 では初めて、段落全体を考慮した改行方式が導入された

text-wrap: pretty が解決する問題

• 段落全体を評価して最適な改行位置を決める
• 短い最終行を防ぎ、行末の形状（rag）を改善し、不要なハイフンを減らす
• Chromium 系ブラウザは段落の最後の4行だけを改善するが、WebKit は段落全体に適用する
• リバー現象まではまだ改善しないが、今後導入する計画がある

各ブラウザの実装の違い

• pretty は CSS Working Group が定義したとおり、ブラウザごとに異なる動作をしうる
• WebKit は段落全体に適用し、Chromium は最後の4行だけに適用する
• そのため開発者は、単に最終行の改善だけでなく、タイポグラフィ全体の向上のために使える

デモを確認する

• CodePen デモ で pretty、balance、ハイフン、整列などの組み合わせを試せる
• 「show guides」と「show ghosts」を有効にして、変更前後を比較できる
• さまざまな言語（英語、アラビア語、ドイツ語、中国語、日本語）で効果を確認できる

パフォーマンスへの懸念を払拭

• 行数の多いコンテンツでは性能に影響する可能性はあるが、一般的な段落では性能上の問題はない
• 数百〜数千行の段落でない限り、自由に使える
• 必要に応じて WebKit は長い段落を分割して処理し、性能を保証する予定

pretty と balance の違い

• pretty はテキストがコンテナ幅をしっかり満たす状態を保ちながら、改行をより自然にする
• balance はすべての行の長さを揃えることに重点を置くため、コンテナを埋めにくくなる
• 一般に pretty は本文テキストに適しており、balance は見出し、キャプション、ティーザーテキストに適している
• どちらも短いテキストに使えるが、長い本文では balance を避けたほうがよい

ほかの text-wrap プロパティ値の説明

text-wrap: avoid-short-last-lines

• 新たに追加された値で、短い最終行を避けることだけに集中する
• まだどのブラウザにも実装されていない

text-wrap: auto

• デフォルト値で、1991 年から使われてきた行単位の「貪欲な改行」アルゴリズムを使う
• 今後はブラウザ側でデフォルト値そのものが改善される可能性もある

text-wrap: stable

• 現在は auto と同じように動作するが、編集可能なテキストに適した安定した改行を提供する
• アニメーション中やテキスト入力中でも改行が変わらないことを保証する

text-wrap の詳細プロパティ

• text-wrap は実際には text-wrap-mode と text-wrap-style の2つのプロパティのショートハンドである

• text-wrap-mode: 改行を許可するかどうかを設定する (wrap / nowrap)

• text-wrap-style: 改行アルゴリズムを選ぶ (auto, stable, balance, pretty, avoid-short-last-lines)

  text-wrap-style: pretty;  
  text-wrap-mode: wrap;  
  

• white-space プロパティと併用する場合は、空白処理の方式も確認が必要

要点まとめ

• text-wrap: pretty は従来よりはるかに精密な Web テキストの改行を可能にする
• Safari Technology Preview 216 で、段落全体を評価する方式として実装された
• 長い本文に適用しても性能問題はほとんどなく、可読性と美観の両面で大きな向上をもたらす
• balance との違いを理解し、コンテンツの種類に応じて適切に選ぶ必要がある

[GN⁺]

Hacker Newsの意見

• 「text-wrap: pretty」のパフォーマンスを多くの開発者が懸念しているという話には笑ってしまう。テキスト折り返しのパフォーマンスを気にする開発者がそんなに多いとは信じがたい
• デモのコンテンツが英語になっている。しかも変な英語だ。主題と関係がなく、単語を並べ替えて改行を改善しようとする場合でもない限り、関係がない
• この機能が ereader に追加されることを期待している。ereader はレイアウトエンジンがよくない
• オンラインテキストを美しくするための努力と注意はあまりにも少なすぎた。Web はテキストを何世紀も前に逆戻りさせた。この機能は歓迎に値する
• Safari Technology Preview に「text-wrap: pretty」対応が追加され、Web タイポグラフィに前例のない水準の洗練をもたらす。caniuse.com によれば Chrome は 2023年9月からこの機能をサポートしている。「前例のない」とは何を指すのか理解しづらい
• 「text-align: justify」と「text-wrap: pretty」の違いを知っている人はいる？ Chrome では「text-wrap: pretty」のほうがずっとなめらかな効果を出す。平均的なブログ本文で両方を使うのがよいか確認してみたが、それぞれ独立した変化をもたらすように見える
• この機能は素晴らしい。短い最終行やギザギザした見た目に注目するのは不思議ではない。しかし、リバーを防ぐための調整はまだ行っていない。リバーを定義する指標をどう定義すればよいのか想像しにくい。誰かが実際に機能する巧妙な指標を発明したのか気になる
• 孤立語を避けようとした段落が「large」という単語を1つだけ残してしまう。「text-wrap: pretty」を適用すると解決する
• CSS Working Group が設計した「pretty」の目的は、各ブラウザがテキスト折り返しを改善するためにできることを行うことにある。すべてのブラウザに同じ選択を強制するものではない。Chrome の実装方法のせいで、多くの Web 開発者はこの値が短い最終行を防ぐためのものだと期待している。しかし、それは意図ではない
• すでに見出しには「text-wrap: balance」を使っている。よくない折り返しを避けるために特定の単語をつないでいた。「text-wrap: pretty」は本文テキストの似た問題を解決してくれそうだ