Pretext
元Reactコア開発者Cheng Lou氏が開発したPretextは、DOMに触れることなく段落テキストの高さを計算する革新的なブラウザライブラリであり、大規模な多言語テキストレンダリングのパフォーマンスを大幅に向上させる可能性がある。
キーポイント
DOM非依存のテキスト高さ計算
PretextはDOMに触れることなく段落テキストの高さを計算する革新的な手法を提供し、従来のDOMレンダリング計測に比べて大幅なパフォーマンス向上を実現している。
prepare()とlayout()の分離アーキテクチャ
prepare()関数でテキストをセグメント化してオフスクリーンキャンバスで計測し、layout()関数で指定幅での折り返し行数と高さを計算する二段階アプローチを採用している。
大規模多言語テキストの実証テスト
『グレート・ギャツビー』全文やタイ語、中国語、韓国語、日本語、アラビア語など多様な言語の公開ドキュメントを使用した包括的なテストで精度を実証している。
ブラウザアプリケーションの新たな表現可能性
この高速なテキスト計測技術により、ブラウザアプリケーションでこれまで実現が困難だった様々なテキストレンダリング効果が可能になる。
影響分析・編集コメントを表示
影響分析
この技術はフロントエンド開発におけるテキストレンダリングのパフォーマンスボトルネックを根本的に解決し、特に大量の動的テキストを扱うWebアプリケーション（CMS、ドキュメントエディタ、データ可視化ツールなど）のユーザー体験を大幅に向上させる可能性がある。DOM操作の最小化は現代のWebパフォーマンス最適化の核心的な課題に対処しており、今後のフロントエンド開発のベストプラクティスに影響を与える可能性が高い。
編集コメント
Reactコア開発者による実践的なパフォーマンス最適化ソリューションは、理論ではなく現場の課題から生まれた価値ある貢献。大規模多言語テストによる実証主義的アプローチが信頼性を高めている。
Cheng Lou 氏による、以前は React コア開発者であり、アニメーションライブラリ react-motion の原作者でもある方から提供される、魅力的な新しいブラウザ用ライブラリです。
Pretext は、DOM にアクセスすることなく、折り返されたテキストの段落の高さを計算する問題に対処します。通常はこのためにテキストをレンダリングしてその寸法を測定しますが、これは非常にコストがかかります。Pretext は巧妙なトリックの配列を用いてこれをはるかに高速化し、ブラウザアプリケーションにおけるあらゆる種類の新しいテキスト描画効果を実現可能にしています。
ここでは、これが可能にするようなことの例を示す デモ をご覧ください：
この仕組みの鍵となるのは、計算を prepare() 関数への呼び出しと、それに続く複数の layout() 関数への呼び出しに分離する点にあります。
prepare() 関数は、入力テキストをセグメント（実質的には単語ですが、ソフトハイフンや非ラテン文字シーケンス、絵文字なども考慮します）に分割し、オフスクリーンのキャンバスを使用してそれらを測定した上で結果をキャッシュします。これは比較的コストがかかりますが、一度だけ実行されます。
その後、layout() 関数はブラウザの単語折り返しロジックをエミュレートして、指定された幅でテキストが占有する折り返された行数を特定し、全体の寸法を測定することができます。
私は、Pretext 自体の簡略化されたバージョンに基づいて、何が起きているのかを視覚的に理解できるよう、Claude に このインタラクティブなアーティファクト を作成させました。
このテスト手法は特に印象的です。初期のテストでは、『グレート・ギャツビー』の完全なコピーを複数のブラウザでレンダリング して、大量のテキストに対して推定測定の正確性を確認しました。その後、この手法を用いてタイ語、中国語、韓国語、日本語、アラビア語などの長文パブリックドメイン文書に対してテストを行う corpora/ フォルダ が追加されました。
Via @_chenglou
Tags: browsers, css, javascript, testing, react, typescript
原文を表示
Exciting new browser library from Cheng Lou, previously a React core developer and the original creator of the react-motion animation library.
Pretext solves the problem of calculating the height of a paragraph of line-wrapped text *without touching the DOM*. The usual way of doing this is to render the text and measure its dimensions, but this is extremely expensive. Pretext uses an array of clever tricks to make this much, much faster, which enables all sorts of new text rendering effects in browser applications.
Here's one demo that shows the kind of things this makes possible:
The key to how this works is the way it separates calculations into a call to a prepare() function followed by multiple calls to layout().
The prepare() function splits the input text into segments (effectively words, but it can take things like soft hyphens and non-latin character sequences and emoji into account as well) and measures those using an off-screen canvas, then caches the results. This is comparatively expensive but only runs once.
The layout() function can then emulate the word-wrapping logic in browsers to figure out how many wrapped lines the text will occupy at a specified width and measure the overall height.
I had Claude build me this interactive artifact to help me visually understand what's going on, based on a simplified version of Pretext itself.
The way this is tested is particularly impressive. The earlier tests rendered a full copy of the Great Gatsby in multiple browsers to confirm that the estimated measurements were correct against a large volume of text. This was later joined by the corpora/ folder using the same technique against lengthy public domain documents in Thai, Chinese, Korean, Japanese, Arabic, and more.
Via @_chenglou
Tags: browsers, css, javascript, testing, react, typescript
関連記事
今日のまとめ
AI日報で今日の重要ニュースをまとめ読み