Repolode
投稿する
chenglou

chenglou/pretext

DOMのリフローを発生させずに複数行テキストを計測・レイアウトし、DOM、Canvas、SVGに描画できるPure JavaScript/TypeScriptライブラリ。

GitHub で見る公式サイト
スター
50,839
フォーク
2,761
未解決の Issue
65
最終コミット
5 日前

これは何？

Pretextは複数行テキストを計測し、プレーンなJavaScriptまたはTypeScriptで改行位置を計算します。そのため、レイアウトコードは`getBoundingClientRect`や`offsetHeight`を読み取らずに、段落の高さや各行の情報を取得できます。こうしたDOMの読み取りはブラウザーにページのリフローを強制するため、コストがかかります。Pretextは幅の計測にブラウザーのCanvasテキスト計測を使い、その結果に独自の改行ロジックを適用します。

基本的な処理は2つの呼び出しで完結します。`prepare()`で特定のフォントに対するテキストの解析と計測を一度行い、`layout()`でキャッシュ済みの幅を使った算術計算だけで、任意の最大幅と行の高さに対する`height`と`lineCount`を返します。より低レベルのAPIでは、個々の行や行幅、カーソルを取得でき、幅に合わせた吹き出し、画像の周囲へのテキスト回り込み、省略記号による行数制限などの手動レイアウトに利用できます。リッチなインラインAPIは、異なるフォント、コードスパン、画像やチップなどのインラインボックスを扱います。

`normal`と`pre-wrap`のwhite-spaceモード、`keep-all`による単語の改行制御、文字間隔をサポートしています。利用にはCanvas 2Dのテキスト計測、Unicode property escapes、`Intl.Segmenter`に対応したブラウザーが必要です。ブラウザー以外では、独自の`OffscreenCanvas`計測器を指定する必要があります。

主な機能

  • 01`prepare()`と`layout()`を使い、DOMのリフローを発生させずに段落の高さと行数を計算します。
  • 02手動レイアウト向けに、個々の行、行幅、カーソルを返します。
  • 03異なるフォント、コードスパン、インラインボックスに対応するリッチなインラインAPIを備えています。
  • 04`pre-wrap`、`keep-all`による単語の改行制御、文字間隔をサポートします。
  • 05結果をDOM、Canvas、SVGに描画します。

ユースケース

  • 描画前に各項目の高さを把握し、長いリストを仮想化する。
  • 最も幅の広い行に合わせてチャットの吹き出しの幅を調整する。
  • 行ごとに幅を変えながら、floatした画像の周囲にテキストを回り込ませる。
  • 開発時にボタンのラベルが2行目に折り返されないか確認する。

クイックスタート

  1. 1

    npmからパッケージをインストールします

    npm install @chenglou/pretext
  2. 2

    prepareとlayoutをインポートし、DOMに触れずに段落の高さを測定します

使う前に知っておきたいこと

  • ライセンスはNOASSERTIONと記載されているため、利用条件が不明確です。採用前に確認してください。
  • 測定にはブラウザーのフォントエンジンを使用するため、正確な結果は利用可能なフォントによって異なります。

トピック

#text-layout#text-measurement#typescript#canvas#reflow#typography

よくある質問

pretext とは？
DOMのリフローを発生させずに複数行テキストを計測・レイアウトし、DOM、Canvas、SVGに描画できるPure JavaScript/TypeScriptライブラリ。 Pretextは複数行テキストを計測し、プレーンなJavaScriptまたはTypeScriptで改行位置を計算します。そのため、レイアウトコードは`getBoundingClientRect`や`offsetHeight`を読み取らずに、段落の高さや各行の情報を取得できます。こうしたDOMの読み取りはブラウザーにページのリフローを強制するため、コストがかかります。Pretextは幅の計測にブラウザーのCanvasテキスト計測を使い、その結果に独自の改行ロジックを適用します。
pretext は無料で使えますか？ライセンスは？
pretext は Other ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
pretext は今もメンテナンスされていますか？
活発にメンテナンス中。pretext の最終コミットは 2026年10月15日 です。
pretext は何に使えますか？
描画前に各項目の高さを把握し、長いリストを仮想化する。 最も幅の広い行に合わせてチャットの吹き出しの幅を調整する。 行ごとに幅を変えながら、floatした画像の周囲にテキストを回り込ませる。 開発時にボタンのラベルが2行目に折り返されないか確認する。
pretext のインストール方法は？
npmからパッケージをインストールします: npm install @chenglou/pretext prepareとlayoutをインポートし、DOMに触れずに段落の高さを測定します
pretext はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/chenglou/pretext

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト