DOMを触らずにテキストの高さを計算する「Pretext」
Reactコア開発者であり、アニメーションライブラリ「react-motion」の作者として知られるCheng Lou氏が、新しいブラウザ向けライブラリ「Pretext」を公開した。
解決する課題：折り返しテキストの高さ計算
Webアプリケーション開発において、折り返しを含む段落テキストの高さを事前に求めることは、意外と難しい問題だ。一般的な手法では、実際にDOMへ要素を描画してからgetBoundingClientRect()等で寸法を取得するが、この操作はレイアウト再計算（リフロー）を強制するため非常にコストが高い。動的なテキストレイアウトが求められるリッチなUIでは、これがパフォーマンスのボトルネックになりやすかった。
PretextはDOMに一切触れることなく、この計算を高速に行う。
仕組み：prepare() と layout() の分離
Pretextの核心は、処理を2段階に分離した設計にある。
prepare() 関数では、入力テキストをセグメント（単語単位。ソフトハイフン・非ラテン文字列・絵文字にも対応）に分割し、オフスクリーンCanvas上で各セグメントの寸法を測定してキャッシュする。この処理は比較的コストがかかるが、一度だけ実行すればよい。
layout() 関数では、キャッシュ済みの計測結果を使い、ブラウザのワードラップロジックをエミュレートして、指定した横幅での折り返し行数と全体の高さを算出する。layout()は軽量なため何度でも高速に呼び出せる。この分離設計により、幅が変わるたびに再計算が必要なレスポンシブレイアウトでも効率的に動作する。
テスト手法も注目に値する
Pretextのテスト戦略も印象的だ。初期のテストでは「華麗なるギャツビー（The Great Gatsby）」全文を複数ブラウザで実際にレンダリングし、Pretextの推定値との一致を確認した。現在はcorpora/フォルダに、タイ語・中国語・韓国語・日本語・アラビア語などのパブリックドメイン文書を追加し、多言語での精度検証を行っている。日本語のような複雑な文字組み処理にも対応している点は、日本のWeb開発者にとって注目ポイントだ。
活用シーン
このライブラリが実現するのは、これまでパフォーマンス上の理由から諦めていたリッチなテキスト演出だ。テキストの行数に応じたアニメーション、動的なテキストフィット、仮想スクロールリストでの正確な高さ事前計算などに活用できる。
PretextはGitHub上でオープンソースとして公開されており、TypeScriptで実装されている。
元記事: Pretext