Pretext、複数言語対応のTypeScript テキスト測定ライブラリをリリース

何が起きたか

GitHub開発者chenglou氏が、テキスト測定とレイアウト処理を行うTypeScript/JavaScriptライブラリ「Pretext」をリリースした。DOM操作による高コストなレイアウトリフロー（reflow）を完全に排除し、ブラウザの内部フォントエンジンを活用した高速計算を実現。18,500以上のGitHub Starを集め、プロダクション利用に向けた開発が進行中。

背景と経緯

Webアプリケーション開発において、テキストの描画幅や行数を測定する際、従来はgetBoundingClientRectやoffsetHeightなどのDOM API経由で行われてきた。しかし、これらの操作はレイアウトリフローをトリガーし、ブラウザパフォーマンスにおいて最も高コストな処理の一つとされている。特にリアルタイムテキストエディタやAI駆動のUIコンポーネント開発では、頻繁な測定が必要となり、パフォーマンス劣化は避けられない問題だった。Pretextはこの課題をDOM測定なしのピュアJavaScript実装で解決する。

技術的な仕組み

Pretextは2段階のプロセスで動作する。

prepare()関数は初期化ステップとして機能：

• ホワイトスペース正規化
• テキストセグメンテーション（言語に応じた分割）
• グルールール適用（改行・連結処理）
• Canvas経由でのセグメント幅測定
• 不透明なハンドルを返す

layout()関数は高速ホットパス：

const prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀', '16px Inter')
const { height, lineCount } = layout(prepared, textWidth, 20)
// 純粋な算術演算のみ。DOM操作なし

キャッシュされた幅データを利用した純算術処理により、レイアウト計算は瞬時に完了。複数言語（CJK、アラビア語、絵文字含む）への対応が組み込まれている。

対応出力形式と機能

Pretextは複数の出力ターゲットに対応：

• DOM描画 — 標準のHTML要素へ出力
• Canvas描画 — 高性能2Dレンダリング
• SVG出力 — ベクター形式で対応
• サーバーサイド — Node.js環境での計測対応予定

段落の高さ測定、行数カウント、テキスト幅計算といった基本機能に加え、複数言語のテキストセグメンテーション精度がリサーチデータとして公開されている。

試してみるには

インストール：

npm install @chenglou/pretext

デモ環境：

• リポジトリをクローン後、bun install → bun start でローカル開発サーバー起動、/demosにアクセス
• 公式デモ：chenglou.me/pretext で実装例を確認可能
• 追加デモ：somnai-dreams.github.io/pretext-demos

README.md、DEVELOPMENT.md、RESEARCH.mdでドキュメント、開発ガイド、精度ベンチマークを提供。

参考リンク

• ソース
• Hacker Newsでの議論

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