Pretextは、中国語文字レイアウトにおけるパフォーマンスのボトルネックを解消するオープンソースのAIフロントエンド開発ツールです。

口実とは何か？

Pretextは、元ReactコアメンバーのCheng Lou氏によって開発された、オープンソースの純粋なJavaScript/TypeScriptによる複数行テキストの計測およびレイアウトライブラリです。DOMのリフローを完全に回避し、純粋な算術演算を使用して複数行テキストのサイズを正確に計測するために使用されます。Pretextは2段階のメカニズムを採用しています。 prepare() テキストの前処理（単語分割、Canvas計測、キャッシュ処理）を行います。 layout() 純粋に数学的なレイアウト計算を行います。Pretextは、複数の言語のテキスト、RTL（右から左への記述）、絵文字に対応しています。500のテキストセグメントを19msで前処理し、レイアウトをわずか0.09msで計算します。このツールは、仮想スクロール、チャットバブル、雑誌レイアウト、AI生成UIシナリオに適しており、AIがCSSを理解することなく正確なレイアウトデータを取得できます。

Pretextの主な機能

DOMリフローテキスト測定ゼロバイパス getBoundingClientRect APIがリフローをトリガーすると、テキストの高さと行数は純粋な数学的計算によって取得されます。
2段階アーキテクチャ： prepare() 一度限りの前処理（単語分割＋キャンバス計測＋キャッシュ）。layout() 純粋に算術演算のみを行うレイアウトを採用することで、数百倍のパフォーマンス向上を実現しました。
完全な言語サポート 中国語、日本語、アラビア語（右から左への記述）、絵文字、ソフトハイフンなど、複雑なレイアウトシナリオに対応しています。
ブラウザの違いへの対応Safariなどのブラウザの特殊なレンダリング動作を特定し、逆適合アルゴリズムを使用してそれらを「真の値」としてレンダリングします。
マルチシナリオレイアウトAPI 固定幅の改行、行ごとのルーティング（動的な幅にも対応）、シュリンクラップなどの高度な機能を提供します。
クロスプラットフォームレンダリングのサポートDOM、Canvas、SVGへの出力が可能で、まもなくサーバーサイドレンダリングにも対応予定です。

Pretextの使い方

インストール手順npm経由でインストール @chenglou/pretext パッケージは、必要な機能をプロジェクトに取り込むために使用されます。
2段階呼び出し：使用 prepare テキストに対して一度だけ前処理（単語分割、Canvas計測、結果キャッシュを含む）を実行し、その後... layout 純粋な算術レイアウト計算を実行します。コンテナの幅と行の高さを渡すことで、テキストの高さと行数を取得します。
ウィンドウ適応コンテナの幅が変更された場合（例えば、ウィンドウのサイズが変更された場合）、単にその関数を再度呼び出すだけです。 layout実行を繰り返す必要はありません prepareパフォーマンス向上のため、キャッシュを最大限に活用してください。
空白文字は予約されています。textarea クラスのコンテンツを処理する際、 prepare 設定 whiteSpace: 'pre-wrap' このオプションを使用すると、通常のスペース、タブ、改行を保持できます。
レイアウトの細かい制御：変化 prepareWithSegments セグメント化されたデータを取得する layoutWithLines Canvas/SVGレンダリングのために各行の具体的な内容を取得するには、または... layoutNextLine 行ごとの処理は、動的な幅を持つシナリオにおいて、テキストと画像が混在するレイアウトをサポートします。
キャッシュ管理アプリケーションが多数のフォントまたはテキストバリエーションを切り替えるときは、 clearCache 蓄積されたメモリキャッシュを解放します。

Pretextの重要な情報と使用要件

コアポジショニングDOMのリフローを回避し、純粋な算術演算を用いて複数行テキストの高さとレイアウトを計算する、純粋なJavaScript/TypeScript製のテキスト計測ライブラリです。
パフォーマンス指標500個のテキストセグメントのバッチ前処理には約19ミリ秒かかり、その後のレイアウト計算はわずか0.09ミリ秒で完了します。これは従来のDOM測定よりも数百倍高速です。
言語サポート中国語、日本語、アラビア語（右から左への記述）、絵文字など、あらゆる言語の混在に対応し、双方向テキスト、ソフトハイフン、ブラウザ互換性も備えています。
開発背景元ReactコアメンバーのCheng Lou氏によって開発され、Claude CodeとCodexを使用して数週間の反復作業を経て完成しました。
適用可能なシナリオ仮想スクロール、チャットバブル、ウォーターフォール／マガジンレイアウト、AI生成UI（純粋な機能インターフェースを提供。AIはCSSを理解する必要がない）
環境要件ブラウザ側レンダリング（DOM/Canvas/SVG）をサポートしており、サーバー側レンダリングも近日中にサポート予定です。
フォント同期: 受信中 font パラメータはCSSと一致する必要があります font 宣言文の一貫性を保つこと（フォントサイズ、フォントの太さ、スタイル）。
使用を避けてください system-uimacOSで使用されるフォントによっては、測定値が不正確になる場合があります。特定のフォント名を使用することをお勧めします。

Pretextの主な利点

ゼロDOMリフロー完全にバイパス getBoundingClientRect 並べ替えをトリガーするAPIの場合、レイアウト計算はメインスレッドをブロックしないため、パフォーマンスのボトルネックを回避できます。
極限のスピード性能500セグメントのテキスト前処理には19msかかり、その後のレイアウトはわずか0.09msで完了します。これは従来のDOM計測よりも数百倍高速で、120fpsのスクロールとリアルタイム調整をサポートします。
純粋な算術計算テキストレイアウトを純粋関数に変換します。入力コンテンツ、フォント、幅 → 出力高さと行位置。AIはCSSを理解せずに直接呼び出すことができます。
完全な言語互換性中国語とアラビア語の右から左への混在テキスト、絵文字、双方向テキスト、ソフトハイフンをサポートし、ブラウザの違い（特にSafari）にも自動的に対応します。
柔軟な出力計算結果はDOM、Canvas、SVGにレンダリングでき、仮想スクロール、チャットバブル、マガジンレイアウト、テキストと画像の混在といった複雑なシナリオにも対応します。

Pretextのプロジェクトアドレス

GitHubリポジトリ：https://github.com/chenglou/pretext

Pretextと類似製品との比較

寸法	Pretext	Canvas measureText	DOM測定
コアメカニズム	キャンバス測定 + 純粋な算術的改行アルゴリズム + キャッシュ	ブラウザネイティブのCanvas API	実際のレンダリング後に寸法を確認してください
トリガーの順序変更？	DOMリフローがゼロ	DOM操作なし	トリガーの並べ替え
パフォーマンス	非常に高速（レイアウト時間0.09ms）	中程度（手動での改行が必要）	極めて遅い（バッチ測定中に途切れ途切れになる）
複数行テキストのサポート	完全な改行アルゴリズムを内蔵	自分で実装する必要があります。	ブラウザの自動処理
言語サポート	言語の完全なサポート（右から左への記述や絵文字を含む）	基本サポート	ネイティブブラウザのサポート
使いやすさ	低価格（完全包装済み）	高（カスタムレイアウトシステムが必要）	低（シンプルなAPI）
適用可能なシナリオ	仮想スクロール、チャット、AI生成UI	キャンバスゲーム、シンプルなテキスト	静的ページ、低頻度測定

Pretextの応用シナリオ

仮想スクロール/リスト最適化このツールは各行のテキストの高さを事前に把握しており、レンダリングを行わずにスクロール位置と表示領域を計算することで、120fpsでのスムーズなスクロールを実現します。
チャット/メッセージアプリこのツールは、複数行メッセージバブルの高さを動的に計算し、「タイトな複数行バブル」レイアウトを作成することで、無駄なスペースを削減します。
ウォーターフォール／マガジンレイアウトカードの高さ予測、複数列のテキストフロー、障害物回避機能を備えたテキストと画像の混在レイアウトなどの機能を備えており、Pinterestスタイルのレイアウトや複雑な編集ページの作成を可能にします。
AIストリーミング出力大規模なモデルを生成する際には、コンテンツの飛び飛びやスクロール位置のずれを防ぐため、テキストの高さは単語ごとにリアルタイムで計算されます。

すべてのカテゴリ