Pretext

**[Pretext](https://github.com/chenglou/pretext)** Cheng Lou 氏による、以前は React コア開発者であり、アニメーションライブラリ [react-motion](https://github.com/chenglou/react-motion) の原作者でもある方から提供される、魅力的な新しいブラウザ用ライブラリです。 Pretext は、DOM にアクセスすることなく、折り返されたテキストの段落の高さを計算する問題に対処します。通常はこのためにテキストをレンダリングしてその寸法を測定しますが、これは非常にコストがかかります。Pretext は巧妙なトリックの配列を用いてこれをはるかに高速化し、ブラウザアプリケーションにおけるあらゆる種類の新しいテキスト描画効果を実現可能にしています。 ここでは、これが可能にするようなことの例を示す [デモ](https://chenglou.me/pretext/dynamic-layout/) をご覧ください： この仕組みの鍵となるのは、計算を `prepare()` 関数への呼び出しと、それに続く複数の `layout()` 関数への呼び出しに分離する点にあります。 `prepare()` 関数は、入力テキストをセグメント（実質的には単語ですが、ソフトハイフンや非ラテン文字シーケンス、絵文字なども考慮します）に分割し、オフスクリーンのキャンバスを使用してそれらを測定した上で結果をキャッシュします。これは比較的コストがかかりますが、一度だけ実行されます。 その後、`layout()` 関数はブラウザの単語折り返しロジックをエミュレートして、指定された幅でテキストが占有する折り返された行数を特定し、全体の寸法を測定することができます。 私は、Pretext 自体の簡略化されたバージョンに基づいて、何が起きているのかを視覚的に理解できるよう、Claude に [このインタラクティブなアーティファクト](https://tools.simonwillison.net/pretext-explainer) を作成させました。 このテスト手法は特に印象的です。初期のテストでは、[『グレート・ギャツビー』の完全なコピーを複数のブラウザでレンダリング](https://github.com/chenglou/pretext/commit/d07dd7a5008726f99a15cebe0abd9031022e28ef#diff-835c37ed3b9234ed4d90c7703addb8e47f4fee6d9a28481314afd15ac472f8d2) して、大量のテキストに対して推定測定の正確性を確認しました。その後、この手法を用いてタイ語、中国語、韓国語、日本語、アラビア語などの長文パブリックドメイン文書に対してテストを行う [corpora/ フォルダ](https://github.com/chenglou/pretext/tree/main/corpora) が追加されました。 Via [@_chenglou](https://twitter.com/_chenglou/status/2037713766205608234) Tags: [browsers](https://simonwillison.net/tags/browsers), [css](https://simonwillison.net/tags/css), [javascript](https://simonwillison.net/tags/javascript), [testing](https://simonwillison.net/tags/testing), [react](https://simonwillison.net/tags/react), [typescript](https://simonwillison.net/tags/typescript)

Pretext

背景や根拠まで確認しますか？

調べる

選ぶ

サイト