Pretext
本文の状態
日本語全文を表示中
詳細モードで約2分の本文を読めます。
同じ出来事の情報源
この情報源を基点に整理
Simon Willison Blog
Reactコア開発者のCheng Lou氏が、DOMに触れずに折り返しテキストの高さを計算する新しいブラウザライブラリ「Pretext」を発表した。
Source Article
元記事を日本語で読む
本文に関係しない購読案内、埋め込み通知、サイト内プロモーションは除いています。
Pretext
Cheng Lou 氏による、以前は React コア開発者であり、アニメーションライブラリ react-motion の原作者でもある方から提供される、魅力的な新しいブラウザ用ライブラリです。
Pretext は、DOM にアクセスすることなく、折り返されたテキストの段落の高さを計算する問題に対処します。通常はこのためにテキストをレンダリングしてその寸法を測定しますが、これは非常にコストがかかります。Pretext は巧妙なトリックの配列を用いてこれをはるかに高速化し、ブラウザアプリケーションにおけるあらゆる種類の新しいテキスト描画効果を実現可能にしています。
ここでは、これが可能にするようなことの例を示す デモ をご覧ください：
この仕組みの鍵となるのは、計算を prepare() 関数への呼び出しと、それに続く複数の layout() 関数への呼び出しに分離する点にあります。
prepare() 関数は、入力テキストをセグメント（実質的には単語ですが、ソフトハイフンや非ラテン文字シーケンス、絵文字なども考慮します）に分割し、オフスクリーンのキャンバスを使用してそれらを測定した上で結果をキャッシュします。これは比較的コストがかかりますが、一度だけ実行されます。
その後、layout() 関数はブラウザの単語折り返しロジックをエミュレートして、指定された幅でテキストが占有する折り返された行数を特定し、全体の寸法を測定することができます。
私は、Pretext 自体の簡略化されたバージョンに基づいて、何が起きているのかを視覚的に理解できるよう、Claude に このインタラクティブなアーティファクト を作成させました。
このテスト手法は特に印象的です。初期のテストでは、『グレート・ギャツビー』の完全なコピーを複数のブラウザでレンダリング して、大量のテキストに対して推定測定の正確性を確認しました。その後、この手法を用いてタイ語、中国語、韓国語、日本語、アラビア語などの長文パブリックドメイン文書に対してテストを行う corpora/ フォルダ が追加されました。
Via @_chenglou
Tags: browsers, css, javascript, testing, react, typescript
原文を表示
Pretext
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デイリーブリーフで今日の重要ニュースをまとめ読み