DOM に触れずに テキストを計測する
Pretext はブラウザの layout reflow を迂回し、純粋な数学だけでテキストの高さと改行位置を計算する TypeScript 製のテキストレイアウトライブラリです。DOM ベースの計測より 300〜600 倍高速で、多言語テキスト、絵文字、双方向テキストを完全にサポートし、Canvas / SVG / WebGL 時代の UI のために作られています。
“テキストレイアウトと計測は、より面白い UI を解放する最後にして最大のボトルネックであり続けてきました。AI 時代ではなおさらです。”
インストールと使い方
import { prepare, layout } from '@chenglou/pretext';
// Step 1: フォントを一度だけ解析（1〜5ms、初回のみ）
const prepared = await prepare('Hello, 世界 🌍', '16px Inter');
// Step 2: 任意の幅でレイアウトを計算（0.0002ms、自由に呼べる）
const { height, lineCount } = layout(prepared, 300);
console.log(height); // 正確なピクセル高
console.log(lineCount); // 行数
Pretext は ESM と CJS の両方をサポートし、ブラウザ、Node.js、Web Worker で動作します。
公式デモ
すべて見る →Accordion
↗展開 / 折りたたみアニメーションで、Pretext がリアルタイムにテキスト高さを計算。DOM 読み取りは不要
Editorial Engine
↗アニメーション球体、ライブなテキスト回り込み、引用、多段組みをすべて DOM 計測なしで実現
Dynamic Layout
↗障害物を避けながら文字が 60fps で流れ続ける、Pretext の形状対応テキストルーティング
Masonry
↗テキストカードのウォーターフォールレイアウト。高さは DOM ではなく Pretext が予測
Justification Comparison
↗CSS の均等割り付け、貪欲法の改行、Knuth-Plass 段落レイアウトを横並びで比較
Rich Text
↗インラインコード、リンク、チップなどのリッチ要素を正確に流し込むレイアウト
Variable Typographic ASCII
↗等幅ではなく比例グリフ計測を使った、粒子駆動の ASCII アート実験
Bubbles
↗Pretext が最適な幅を自動計算し、無駄を減らしたコンパクトな複数行メッセージバブル
コミュニティ Showcase
X / Twitter で拡散した創作デモ。Pretext が何を可能にするかを示しています
Web がまた面白くなった
@EsotericCofe「ついに Web がまた面白くなった」
光る小さなドラゴン
@Riyvir「この小さな光るドラゴンは Pretext に大喜びしている。」
人生でいちばん魔法の時間
@reathchris「今が人生でいちばん魔法みたいな時期だ」
夢に見たテキストレイアウトが作れる
@rauchg「ついに理想のテキストレイアウトを出せる」
流体インターフェース最高
@vamsibatchuk「これは最高。流体インターフェース万歳。」
物理の教科書がもう退屈じゃない
@stevibe「物理の教科書がもう退屈じゃない」
とんでもない水面エフェクト
@dushankas「やばい」
Pretext Breaker を遊ぼう
@singular_prism「さあ、Pretext Breaker を遊ぼう 🎮」
なぜ Pretext なのか？
getBoundingClientRect() や offsetHeight を呼ぶたびに、ブラウザはすべての JavaScript を一時停止し、ページ全体のジオメトリを再計算してから値を返します。500 個のテキストブロックがあるページでは、DOM ベースの計測は 15〜30ms を要し、500 回の layout reflow を引き起こします。Pretext は同じ処理を 0.05ms、reflow 0 回で完了し、300〜600 倍の改善を実現します。
従来の方法
見えない DOM 要素を作成 → CSS を適用 → ドキュメントへ挿入 → getBoundingClientRect() を呼ぶ → 要素を削除。計測のたびにページ全体の layout reflow を強制します。500 ブロックなら 500 reflow です。
Pretext の方法
prepare() は Canvas measureText を使ってフォントメトリクスを一度だけ解析し、結果をキャッシュします。その後の layout() はすべて純粋な算術処理です。DOM に触れず、reflow も起こさず、Web Worker やサーバーからも呼び出せます。
仮想スクロール
レイアウトシフト防止
Canvas / WebGL 描画
Masonry レイアウト
障害物回避型テキストフロー
SVG / サーバーサイド描画
仕組み
高コストな計測と低コストな計算を切り離す、Pretext の 2 段階設計
prepare() — 一度きりのフォント解析
Pretext はまず CSS 仕様に従って空白を正規化し、その後ブラウザ内蔵の Intl.Segmenter を使って Unicode 分割を行います。CJK の文字単位改行、空白のないタイ語、アラビア語の RTL スクリプト、絵文字シーケンスも正しく扱います。分割された単位は Canvas measureText で計測され、(segment, font) 単位でキャッシュされます。この prepare() フェーズ全体は 1〜5ms で、一度だけ走ります。
layout() — 純粋な算術
フォントメトリクスがキャッシュされた後の layout() は純粋な数学です。キャッシュ済みの幅を順に足し、maxWidth に達したら改行します。末尾の空白が行幅を超えても再フローを起こさないという CSS の端ケースも処理します。1 回あたり約 0.0002ms なので、各アニメーションフレームで呼んでも安全です。
Safari の絵文字補正
Safari の Canvas API は、実際の DOM 描画とは異なる絵文字幅を返すことがあります。Pretext はフォントごとに最初の絵文字遭遇時だけ隠し DOM 計測を実行し、補正係数を確立してキャッシュします。以後の絵文字計測にはその係数を適用し、全ブラウザでピクセル精度を維持します。
組み込み検証
Pretext には、隠し DOM 要素を生成して実際の描画高さを Pretext の計算結果と比較する検証システムがあります。この並列比較が、Pretext の精度主張を裏付け、デバッグ時の検証を可能にしています。
対応するテキスト種類
CJK（中国語 / 日本語 / 韓国語）
絵文字
双方向テキスト（BiDi）
空白のない言語
ソフトハイフン
リッチなインライン要素
他手法との比較
Pretext だけが唯一の方法ではありませんが、速度・精度・言語対応の総合バランスで先行しています
DOM 計測
生の Canvas.measureText
HarfBuzz (WASM)
Pretext
作者について
Cheng Lou
React コアチームの元メンバーであり、ReasonML（現 Melange）の共同開発者、現在は Midjourney のフロントエンドエンジニアです。Pretext 自体の開発過程も興味深く、Cheng Lou は Claude Code や Codex のような AI コーディングアシスタントにブラウザ描画ベンチマークを渡し、主要なコンテナ幅ごとに数週間かけて反復的に実装を最適化させました。Midjourney の本番環境で信頼性を確認した後、Pretext をオープンソース化しました。
コミュニティの反応
2026 年 3 月の公開直後、Pretext はフロントエンド界隈で大きな議論を呼びました
“テキストレイアウトと計測は、より面白い UI を解放する最後にして最大のボトルネックであり続けてきました。AI 時代ではなおさらです。”
“Pretext は、DOM の外で折り返しテキストの高さを計算するという長年の問題を解決します。”
“これは派手なデモではなく、CSS ベースのレイアウトを置き換える基盤インフラだ。本当の UI パラダイムシフトだ。”
既知の制限
Pretext は万能薬ではありません。導入前にこの境界条件を理解してください