TypeScript向け「Pretext」、DOM測定を不要にする高速テキストレイアウト実装

何が起きたか

TypeScript/JavaScriptの純粋実装テキストレイアウトライブラリ「Pretext」が公開された。GitHubで17.2k の Star を集める本ライブラリは、従来のDOM測定（getBoundingClientRect、offsetHeightなど）による高コストなレイアウトリフロー を完全に回避。Canvas測定をベースにした自前実装で、複数行テキストの正確な高さと行数を算出する。DOM、Canvas、SVG、将来的にはサーバーサイドへのレンダリングにも対応予定。

背景と経緯

ブラウザでテキストレイアウトを測定する際、getBoundingClientRect()やoffsetHeightといったDOM APIは強制的なレイアウトリフロー を引き起こす。これはレンダリングパイプラインの最も重い処理の一つで、複雑なUI（特にリアルタイム更新が必要な場合）ではパフォーマンス低下に直結する。Pretext は、ブラウザの標準フォントエンジンを「真実の源」として活用しながら、純粋な算術演算による高速な計算パスを提供することで、この課題を根本的に解決する。

技術的な仕組み

Pretext は2段階の処理構造を採用。

第一段階の prepare() は一度だけ実行：

• テキストの正規化（ホワイトスペース処理）
• テキストセグメンテーション
• グルー規則の適用
• Canvas を用いたセグメント幅の測定
• 測定結果をキャッシュして不透明なハンドルを返す

第二段階の layout() は高速なホットパス：

const prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀', '16px Inter')
const { height, lineCount } = layout(prepared, textWidth, 20)
// 純粋な算術演算。DOM レイアウト不要

キャッシュされた幅情報に対して純粋な算術処理のみを行うため、DOM 操作は完全に排除される。日本語、アラビア語、絵文字など全言語対応。

競合状況

今後の展望

開発者チームは以下の拡張を予定している：

• サーバーサイドレンダリング対応（Node.js 環境での実行）
• より高度なタイポグラフィ機能の実装
• ベンチマークスイートの充実（accuracy フォルダに測定精度検証を継続）
• AI 適応的なレイアウト手法への実装応用

GitHubリポジトリは積極的な開発が続いており、Issues 13件、Pull requests 19件が進行中。

試してみるには

npm install @chenglou/pretext

公式デモは https://chenglou.me/pretext で確認可能。ローカルでの動作確認は以下手順：

1. リポジトリをクローン
2. bun install でインストール
3. bun start で開発サーバー起動
4. /demos にアクセス（末尾スラッシュなし）

API は シンプルで prepare() 一度、layout() ループ内で何度も呼び出す設計。テキスト測定が頻繁に必要なリッチエディタやテキストレイアウトエンジン実装に向く。

参考リンク

• ソース
• Hacker Newsでの議論

この記事はAI業界の最新動向を速報でお届けする「AI Heartland ニュース」です。