Pretext.js
DOMに一切触れないテキスト計測。
Pretextは複数行テキストの計測と配置を完全に算術演算で行います。getBoundingClientRect不要、リフローなし、スラッシングなし。初回から高速。2回目以降は瞬時。
Pretextが存在する理由：すべてのDOM計測はパフォーマンスの罠。
JavaScriptがDOMノードのgetBoundingClientRect()、offsetHeight、またはscrollHeightを呼び出すたびに、ブラウザはスクリプトの実行を一時停止し、保留中のスタイル変更をフラッシュし、ボックスのサイズに関する質問に答えるためだけにフルレンダリングパスを実行する必要があります。
これは強制同期リフローと呼ばれ、ブラウザが実行できる最もコストの高い操作の一つです。タイトなループ内、例えば仮想スクロールリストの1,000アイテムを計測する場合、スラッシングが発生します：ブラウザはフレームごとに数百回、レンダリングとJavaScript実行を交互に繰り返し、最新のハードウェアでさえ停止させます。
残酷な皮肉は、ほとんどの場合、必要なのは数値だけだということです：このコンテナ幅で、このテキストは何ピクセルの高さになるか？その質問にDOMにアクセスする必要はまったくありません。Pretextはまさにそれを証明するために存在します。
// 各イテレーションでブラウザレイアウトを強制 const heights = items.map((item) => { const el = createElement(item.text); document.body.appendChild(el); // ← ここでレイアウトリフローを強制 const h = el.getBoundingClientRect().height; リフロー! document.body.removeChild(el); return h; }); // 1000アイテム = 1000リフロー = ~94ms ≈ 6フレーム落ち
Pretextの仕組み：一度計測し、永遠にレイアウト。
デバイダーをドラッグして、従来のDOMアプローチとPretextを比較してください。一方はすべての呼び出しでリフローを発生させ、Pretextは純粋な算術演算を使用します。
import { prepare, layout } from '@chenglou/pretext' // prepare()は一度だけ実行 — Canvasを使用 const prepared = prepare( 'The quick brown fox jumped.', '16px Inter' ); // layout()は純粋な算術演算 const { height, lineCount } = layout( prepared, containerWidth, lineHeight ); リフローなし // 1000アイテム = 0リフロー = ~0.05ms // 500倍高速、DOMアクセスゼロ
// 各イテレーションでブラウザレイアウトを強制 const heights = items.map((item) => { const el = createElement(item.text); document.body.appendChild(el); // ← ここでレイアウトリフローを強制 const h = el.getBoundingClientRect().height; リフロー! document.body.removeChild(el); return h; }); // 1000アイテム = 1000リフロー = ~94ms // 60fpsで約6フレーム落ち
テキストをセグメント化
空白を正規化し、Unicodeの改行ルールを適用し、ブラウザ自体のテキストセグメンテーションを使用して計測可能な単位に分割します。
Canvasで計測
各セグメントをCanvas measureText()に通して、フォントエンジンから実際のグリフ幅を取得します。結果はキャッシュされます。
Pretextは純粋な算術演算を使用
コンテナ幅が与えられると、セグメント幅を合計して改行を計算します。行数に行の高さを掛けます。高さを返します。DOMは一切使用しません。
Pretextの機能：パフォーマンスクリティカルなケースに対応。
Pretextは、従来のDOM計測がボトルネックとなる複雑でテキスト密度の高いUIを構築する開発者のために設計されています。これらはプロダクション対応にする機能です。
DOMアクセスゼロ
Pretextでは、prepare()の後、すべてのlayout()呼び出しが純粋な算術演算です。getBoundingClientRect不要、offsetHeight不要、強制同期リフローなし。
実際のフォントメトリクス
Pretextは、ヒューリスティクスやルックアップテーブルではなく、ブラウザ自体のCanvasフォントエンジンを使用してグリフ幅を計測します。結果はブラウザが実際にレンダリングするものと一致します。
設計から多言語対応
PretextはCJK、アラビア語、ヘブライ語、タイ語、ヒンディー語、韓国語の書記体系を完全にサポートし、正しいUnicodeセグメンテーションと双方向テキスト処理を含みます。
TypeScriptネイティブ
ゼロからTypeScriptで記述。すべての関数、パラメータ、戻り値に正確な型定義。@typesパッケージ不要、型のトリック不要。
再利用可能なpreparedハンドル
1回のprepare()呼び出しであらゆるコンテナ幅に対応。同じハンドルから3つの算術演算でモバイル、タブレット、デスクトップの高さを計算。
ランタイム依存関係ゼロ
外部パッケージなし、ポリフィルなし、バンドルにサプライズなし。Pretextはすべてのモダンな環境で利用可能な標準ブラウザAPIのみに依存します。
実際のシナリオでのPretext。
Pretextは、従来のDOM計測が限界に達する場面で最も力を発揮します。これらの例は、仮想スクロールから多言語チャットインターフェースまで、Pretextが実際のプロダクション課題を解決する様子を示しています。
可変高さ仮想スクロール
DOM読み取りなしで計算された可変テキスト高さを持つ10,000アイテムのリストをレンダリング。あらゆるデバイスで60fpsのスムーズなスクロール。
PretextによるAIチャットバブル
Pretextを使用して、ストリーミングAI応答のレンダリング完了前にバブル高さを事前計算。チャットインターフェースのシフトやジャンプを完全に排除。
多言語コンテンツフィード
中国語、アラビア語、韓国語、ラテン文字を1つの仮想化リストに混在させたソーシャルフィード。各スクリプトが正確に計測され、特別な処理不要。
Pretextで構築。
コミュニティによるクリエイティブなデモ — テキストドラムマシン、流体シミュレーション、共同ホワイトボードなど。開発者がPretextで何を構築しているかご覧ください。
砂文字エフェクト
Riveで構築された美しい砂文字エフェクト — リアルなテクスチャとアニメーションで、砂に描かれたように文字が現れます。
ジオメトリックテキストビジュアライゼーション
Pretextレイアウトエンジンによるクリエイティブなタイポグラフィの可能性を示す印象的な幾何学的テキストビジュアライゼーション。
3Dオブジェクトテキストラップ
3Dガウシアンスプラットオブジェクトの周りにリアルタイムでシームレスにテキストをラッピング — Pretextレイアウトと3Dレンダリングの融合。
Pretextを3分でインストール。
Pretextはnpmで公開されており、完全なTypeScript宣言が付属しています。お好みのパッケージマネージャーでインストールし、必要な2つの関数をインポートすれば、DOMに触れずにテキスト計測を開始できます。
import { prepare, layout } from '@chenglou/pretext' // ステップ1: テキスト+フォントペアに対して一度だけprepare const handle = prepare( 'Hello, Pretext — no reflow needed.', '16px "Inter"' ); // ステップ2: 任意の幅で即座にレイアウト const { height, lineCount } = layout( handle, 400, // コンテナ幅（px） 24 // 行の高さ（px） ); console.log(height); // → 48 console.log(lineCount); // → 2 // ステップ3: 異なる幅でハンドルを再利用 const narrow = layout(handle, 240, 24); // → 3行
Pretextブログ。
テキストレンダリング、ブラウザパフォーマンス、そして開発者が日々直面する問題をPretextがどう解決するかについての深掘り記事。
Pretextの意味：Pretextとは何か、なぜ開発者に愛されるのか
Pretextの意味とは？ラテン語の語源から最速のJavaScriptテキストレイアウトエンジンまで — Pretextがレンダリング前にレイアウトを計算する仕組みを、コミュニティショーケースと開発者の声とともにご紹介。
Chenglou Pretext：最速JavaScriptテキストレイアウトエンジンの裏側
Cheng LouがReactコアチームからMidjourneyでPretextを構築するまで — DOM計測より600倍高速な純粋JavaScriptテキストレイアウトエンジン。
Pretext NPM：JavaScript & TypeScriptライブラリのインストールと使い方
npmからPretextをインストールし、JavaScriptとTypeScriptでテキストレイアウト計測を始めましょう。完全なAPIウォークスルー、フレームワーク例、実際のユースケース。
今すぐPretextを試す。
仮想スクロールリスト、コードエディタ、AIチャットインターフェース、テキストの高さが重要なあらゆるもの — Pretextはパフォーマンスコストなしに正確な計測を提供します。