Pretext.JS favicon

Pretext.JS

オープンサイト

Pretext.js - DOM操作を一切行わない超高速・純粋算術テキストレイアウトエンジン

導入:

Pretext.jsは、ブラウザのDOMに一切触れることなくテキストの計測と配置を行う画期的なライブラリです。TypeScriptファーストで設計されており、算術計算のみでマルチラインテキストのサイズを算出。従来のgetBoundingClientRectに伴うリフローやレイアウトスラッシングを完全に排除し、仮想スクロールやAIチャット等のパフォーマンスが求められる環境で革新的な速度を実現します。

追加日:

2026-04-08

月間訪問者数:

--K

ウェブデザイン
Pretext.JS - AI Tool Screenshot and Interface Preview

Pretext.JS 製品情報

Pretext.js: DOMに触れない革新的なテキストレイアウトエンジン

Pretext.jsは、ブラウザのDOM（Document Object Model）を一切読み取ることなく、テキストの計測と配置を行うことができる純粋なJavaScript/TypeScriptライブラリです。従来のWeb開発において、テキストの高さや幅を取得するためには、実際にDOM要素を生成してブラウザにレンダリングさせ、getBoundingClientRectなどの負荷の高いAPIを呼び出す必要がありました。Pretext.jsはこの常識を覆し、純粋な算術計算のみでこれを実現します。

Pretext.jsとは？

Pretext.jsは、ゼロDOMリード、TypeScriptファーストを掲げるテキストメジャーメント・エンジンです。通常、ブラウザがテキストをレンダリングするプロセスには、フォントのロード、グリフの形成、幅の計測、改行位置の決定といった複雑なパイプラインが含まれます。これらはブラウザの内部レイアウトツリーに依存しており、JavaScriptからアクセスしようとすると「強制同期リフロー（Forced Synchronous Reflow）」という非常に重い処理を発生させます。

Pretext.jsはこの問題を回避するために、Canvas APIを使用して一度だけ単語の幅を計測・キャッシュし、その後のレイアウト計算をすべて数学的な演算処理で行います。これにより、従来のDOMベースの手法と比較して500倍以上の高速化を達成しています。

Pretext.jsの主な特徴

1. ゼロDOMリードによる圧倒的パフォーマンス

Pretext.jsでは、テキストの準備（prepare）が完了した後、レイアウト計算（layout）においてgetBoundingClientRectやoffsetHeightを一切使用しません。これにより、ブラウザのレイアウトスラッシングを防ぎ、1,000ブロックのレイアウトをわずか約0.05msで完了させることができます。

2. リアルなフォントメトリクスの採用

統計や推測ではなく、ブラウザ自身のCanvas measureText()を使用してグリフの幅を取得します。そのため、実際にブラウザがレンダリングする結果と完全に一致する正確な計測が可能です。

3. 多言語・多書体対応

Pretext.jsは、日本語（CJK）をはじめ、アラビア語、ヘブライ語、タイ語、ヒンディー語、韓国語など、12以上の記述システムをサポートしています。Unicodeの改行ルールや双方向テキスト（BiDi）の処理も適切に行います。

4. TypeScriptネイティブ

TypeScriptでゼロから構築されており、型定義パッケージを別途導入する必要はありません。すべての関数とパラメータに正確な型が提供されています。

5. 依存関係ゼロ

外部パッケージやポリフィルを一切使用しないため、バンドルサイズを最小限に抑え、モダンなブラウザ環境ですぐに動作します。

Pretext.jsの活用シーン（Use Case）

  • 可変高の仮想スクロール: 10,000行を超えるような大規模なリストでも、DOMを介さずに高さを事前計算することで、60fpsの滑らかなスクロールを実現します。
  • AIチャットインターフェース: ストリーミングされるAIの回答に対して、表示前にバブルの高さを計算。コンテンツのガタつき（レイアウトシフト）を完全に排除します。
  • 複雑なテキストラッピング: 円形の障害物を避けてテキストを流し込むなど、CSS Shapesでは不可能な複雑なレイアウトをリアルタイムで処理できます。
  • マルチリンガルフィード: 複数の言語が混在するソーシャルメディア等のフィードで、各スクリプトを正確かつ高速に計測します。

Pretext.jsの使い方（How to Use）

Pretext.jsの導入は非常にシンプルです。まずはパッケージマネージャーでインストールします。

npm install @chenglou/pretext

基本的な使い方は、以下の3ステップです。

  1. 準備 (prepare): テキストとフォント情報を渡して、計測用ハンドルを作成します。この際、内部でCanvasが使用されます。
  2. レイアウト (layout): コンテナの幅と行の高さを指定して、算術計算で高さを算出します。
  3. 再利用: 同じハンドルを使用して、異なる幅での計算を瞬時に行えます。
import { prepare, layout } from '@chenglou/pretext';

// 1. 一度だけ準備する
const handle = prepare('こんにちは、Pretext.js。リフローは不要です。', '16px "Inter"');

// 2. 任意の幅でレイアウト計算（純粋な算術演算）
const { height, lineCount } = layout(handle, 400, 24);

console.log(`高さ: ${height}px, 行数: ${lineCount}`);

よくある質問（FAQ）

Q: Pretext.jsはどのようにしてDOMを使わずに計測しているのですか？

A: 最初にprepare関数を呼び出した際、非表示のCanvas API（measureText）を使用して各セグメントの幅を計測し、キャッシュします。その後のlayout処理では、そのキャッシュされた数値を用いて算術的に改行位置と全体の高さを算出するため、DOMへのアクセスが不要になります。

Q: ブラウザのレンダリング結果とズレが生じることはありませんか？

A: Pretext.jsはブラウザ自身のフォントエンジン（Canvas経由）を利用して計測するため、基本的にはブラウザが実際に描画するテキスト幅と一致します。

Q: 対応しているフレームワークはありますか？

A: Pretext.jsは純粋なJavaScriptライブラリであり、特定のフレームワークに依存しません。React, Vue, Svelte, Angularなど、あらゆる環境で利用可能です。

Q: CSSの複雑なプロパティ（letter-spacingなど）は考慮されますか？

A: 提供されたコンテンツに基づくと、主にフォントサイズとフォントファミリーを指定して計測を行います。高度なCSSプロパティについては、Canvasのフォント指定に準じます。