Pretextライブラリ

概要

Pretextライブラリとは？

Pretextライブラリは、Cheng Lou（元Reactコアチームメンバー、現Midjourney所属）が作成した純粋なJavaScript/TypeScriptテキスト計測エンジンです。テキストを計測するためにブラウザがDOMにレンダリングする必要がある従来のアプローチとは異なり、Pretextライブラリはテキストレイアウトを2つの軽量フェーズに分割します — JavaScriptで利用可能な最速のテキスト計測ライブラリです。

Pretextライブラリの第1フェーズは準備です。テキストとフォントを指定してprepare()を一度呼び出します。PretextライブラリはUnicodeルールを使用してテキストをセグメント化し、Canvas measureText() APIを介して各セグメントのグリフ幅を計測します。テキストの長さに応じて通常0.1〜1msかかります。

第2フェーズはレイアウトです。コンテナ幅と行の高さを指定してlayout()を呼び出します。Pretextライブラリはキャッシュされたセグメント幅を純粋な算術演算で処理します — DOMアクセスなし、強制リフローなし。Pretextライブラリでの1回のレイアウト呼び出しは約0.001msで、フレームあたり数千回実行するのに十分な速さです。preparedハンドルは再利用可能：同じハンドルから3つの演算でモバイル、タブレット、デスクトップの高さを計算できます。

GitHubのPretextライブラリ（github.com/chenglou/pretext）— 23.6kスター、MITライセンス、純粋TypeScript(github.com/chenglou/pretext) —

$ npm install @chenglou/pretext

import { prepare, layout } from '@chenglou/pretext'

const prepared = prepare('Your text', '16px Inter')
const { height, lineCount } = layout(prepared, 400, 24)

パフォーマンス比較

Pretextライブラリ vs DOM計測

従来のDOM計測は不可視の要素を作成し、テキストをレンダリングし、計算された高さを読み取り、要素を削除します。Pretextライブラリはこのサイクル全体を排除します。PretextライブラリとDOMの標準アプローチの比較です。

API

PretextライブラリAPIリファレンス

Pretextライブラリは小さく集中したAPIを公開します。Pretextライブラリのすべての関数は特定の目的を果たします — 準備またはレイアウト。完全な関数リファレンスです。