ソフトウェア

DOM操作なしで多行テキストの高さを計算するという問題を解決したTypeScriptライブラリ「Pretext」が話題に


2026年3月に公開されたTypeScriptライブラリ「Pretext」は登場するやいなやX(旧Twitter)などのSNSを中心にポストが拡散されました。Pretextはウェブ上のテキストの行数や高さを計算してくれるツールとのことですが、その話題性はどのあたりにあるのでしょうか？

chenglou/pretext: Fast, accurate & comprehensive text measurement & layout
https://github.com/chenglou/pretext

2026年3月28日に作者のCheng Lou氏自らがポストしています。

「純粋なTypeScriptで書かれた高速・正確・包括的テキスト測定アルゴリズム」「CSSを使わずにウェブページ全体のレイアウトに活用可能でDOM測定とリフローを回避」


Cheng Lou氏の作成したデモは以下のサイトで実際に確認できます。

Pretext Demos
https://chenglou.me/pretext/


◆Xでの様々な反応
作者のポストを受けて様々な反応が寄せられます。

「AppleのビジョンモデルとExpo Agentと組み合わせ」


「もし読むために携帯を完璧に水平に保たなければならなかったら？」


Pretextの使い道を模索する人も現れます。

「1ページに必ず収まる履歴書ビルダー、リアルタイムレンダリング付き」


「この小さな光るドラゴンはPretextに大喜びしています」


「基本的な静的ページを実際に触りたくなるようなものに変身させた」


「pretextのデモでタイポグラフィばかり見せられてうんざりしてるのはわかってますよ！」


「DOMへの直接埋め込みでもcanvas内ネイティブでもうまく動く」


一方で冷静に、既存の技術にすぎないと指摘する人も。

「その問題は30年前に解決済みでありワードプロセッサのアルゴリズムに既に存在しています」


「ずっと前から簡単にできたことだ、そのためにcanvas APIが存在してる」


「measureText()のラッパーに過ぎない、これは新しいパラダイムなんかじゃない」


「Appleは15年前にiPadでこれをやってた」


デザイナーとエンジニアで評価が分かれるのではないかと指摘する人もいます。

「フロントエンドの人たちは『遊び心たっぷりのこのデモ見てよ』って感じで、エンジニアたちは『テキストが読めないし15年前にもうできたことだよ』って感じ」


「ボールが跳ねる以上の可能性を見出せる人々とそうでない人々との、こんなに大きな分断を見たことがない！」


◆Hacker Newsでの議論
ソーシャルニュースサイトのHacker NewsでもPretextは話題となっています。

Pretext: TypeScript library for multiline text measurement and layout | Hacker News
https://news.ycombinator.com/item?id=47556290

Pretextの主な機能について要約すると以下のものが挙げられています。

・効率的なテキスト測定：テキストのレンダリング前に高さを計算することで、特に大量のテキストを扱う際のレンダリングコストを削減
・高いパフォーマンス：単語などの個々のセグメントの幅と高さを事前に計算しキャッシュすることでパフォーマンスを向上
・カスタムレイアウトアルゴリズム：ブラウザのテキスト折り返しアルゴリズムをカスタムコードで実装し、ハイフネーション・絵文字・中国語など多様な文字種・折り返し方式に対応
・ブラウザ間差異への対応：Safariなどのブラウザ間の微妙なレンダリングアルゴリズムの違いに対応するために実際のブラウザを用いてテストを実施
・想定されるユースケース：データテーブルの仮想化やデスクトップアプリケーションでの動的な幅変更など、テキストレイアウトが頻繁に変わる状況での利用を想定

議論されている点については以下の通りです。

・パフォーマンス
PretextがASCIIテキストの測定に約2200msかかるケースでuWrapのようなシンプルなライブラリなら80msで完了すると、パフォーマンス面での指摘がありました。PretextのGitHubでは記事作成時点でパフォーマンス改善のためのプルリクエストが複数存在しており今後の改善が期待されています。中にはAIコーディングによる弊害なのではという意見もありましたが、単に使用ライブラリのスコープに起因する問題であるとの反論もありました。CanvasのmeasureText APIを使用している点についてはネイティブのレンダリングテキスト幅APIと比較すると遅いのではという指摘も。

・機能とスコープ
uWrapはラテン文字のみを対象とし特定のCSSプロパティのみを扱いますが、Pretextはより広範なタイポグラフィやテキストレイアウト(normal・pre-wrap)に対応することを目指していることが特徴となっています。一方で、Pretextのデモを確認すると基本的なラテン文字の表示に問題があるとの指摘もありました。また、PretextはテキストをCanvasにレンダリングして測定しているだけでありブラウザのネイティブレイアウトシステムをバイパスしているわけではないという意見もあります。

・AIの役割
PretextはAIを使用して開発された可能性が高く、AIがなければ実現はより困難で多くの労力を要しただろうと評価されています。具体的なAIの役割は、ブラウザの実際のレンダリング結果の学習に基づく測定とイテレーションの反復を行い、ブラウザ間の差異を吸収するのに役立ったものと考えられています。

・ブラウザ標準機能への期待
将来的にはテキストレイアウト測定機能はブラウザの標準API(WebAPI)として提供されるべきだという意見が多く見られます。記事作成時点でもCSS HoudiniのFontMetrics APIなどが提案されているもののブラウザベンダーの対応が遅れている現状が指摘されています。そもそも論として、「テキストの行数や高さを計算する」という基本的な機能をブラウザが実装していないことへの疑問も呈されていました。

◆まとめ
Pretextはデモによるビジュアル的な斬新さが話題になった一方で、「ブラウザのテキストレイアウトの複雑さ」「テキストレイアウトの問題を解決するためのネイティブAPIの必要性」「AIが開発に与える影響」について一石を投じたプロジェクトであるともいえます。

この記事のタイトルとURLをコピーする

・関連記事
Claude Codeはカスタムソリューションを構築する傾向が強いがそれでもなおよく選ぶツールは何か？ - GIGAZINE

数万人規模の意見を集約するオープンソースプラットフォーム「Polis」は台湾やイギリスで有効性が実証され国家レベルの民主的インフラとして定着している - GIGAZINE

無料・軽量でプライバシー保護を重視したノート作成アプリ「NoteDiscovery」、LaTeX数式入力・Mermaidダイアグラム・スマートなタグ管理・カスタムテンプレート・コードハイライト表示などを搭載しセルフホスト可能 - GIGAZINE

わずか10KBのRAMで動く組み込みシステム向けにJavaScriptプログラムをコンパイルして実行できる「MicroQuickJS」 - GIGAZINE

CSSグリッドレーン(Grid Lanes)とは何なのかをWebKit公式が解説 - GIGAZINE

自作の小さなRPGでパフォーマンス上の問題を引き起こした原因とは？ - GIGAZINE

「SwitchBot ハブ3」を用いてサーバー室の空調を自動管理してみた - GIGAZINE

・関連コンテンツ

in AI,   ソフトウェア, Posted by log1c_sh

You can read the machine translated English article The TypeScript library 'Pretext,' which ….