chenglou

pretext

Frontend#TypeScript #JavaScript#Layout#Canvas#Performance

// 概要

Pretext は、高コストな DOM reflow 操作に依存せず、高速かつ正確な複数行テキストの計測とレイアウトを提供する JavaScript/TypeScript ライブラリです。ブラウザのフォントエンジンを基準とした独自の計測ロジックを実装することで、Canvas や SVG といった多様なレンダリングターゲットに対して効率的なテキスト処理を実現します。本ライブラリは、単純な高さ計算のための高レベル API と、複雑なテキストレイアウトを手動で行うための低レベルツールの両方を提供します。

// 技術解説

Pretext は、高コストな DOM reflow に依存せず、複数行のテキスト測定とレイアウトを処理するために設計された高性能な JavaScript/TypeScript ライブラリです。ブラウザの font engine を真実のソースとして独自の測定ロジックを実装することで、開発者は virtualization やカスタムレイアウトエンジンといった複雑なテキスト計算を純粋な算術演算で実行できます。この設計上の選択は速度と精度を優先しており、従来のブラウザベースのテキスト測定に伴うパフォーマンスのボトルネックを効果的に解決します。

// 主要ハイライト

純粋な算術演算とキャッシュされた canvas ベースのメトリクスを通じてテキスト測定を行うことで、高コストな DOM layout reflow を排除します。

ブラウザ側のハックなしで、text virtualization、masonry、カスタム flexbox のような実装といった高度なレイアウトシナリオをサポートします。

手動の行レイアウトのためのストリーミングかつ iterator ベースの API を提供し、floated images のような動的要素の周囲での複雑なテキスト折り返しを可能にします。

境界の空白の折りたたみや、chips や mentions といった atomic items を管理する、特殊な rich-text inline flow helper を含みます。

高コストな一度限りのテキスト準備と、高速な hot-path レイアウト計算を分離する2フェーズアーキテクチャを提供します。

テキストのオーバーフローやレイアウト動作の開発時の正確な検証を可能にし、AI フレンドリーな反復サイクルを促進します。

// ユースケース

ブラウザのレイアウト reflow を発生させずに、段落の高さや行数を計算すること。

Canvas、SVG、または WebGL 環境でのカスタムレンダリングに向けた手動のテキストレイアウトを実行すること。

仮想化、Masonry レイアウト、要素の周囲への動的なテキスト折り返しといった高度な UI 機能を実装すること。

// クイックスタート

Pretext を使い始めるには、npm を使用して 'npm install @chenglou/pretext' でパッケージをインストールしてください。'prepare' 関数と 'layout' 関数をインポートしてテキストを解析し寸法を計算するか、行ごとのレンダリングをより細かく制御するために 'prepareWithSegments' を使用します。リポジトリをクローンして提供されているデモスクリプトを実行することで、ライブラリの機能を探索できます。