CSSを使わずに文字を配置する「Pretext」とは？Web制作の常識が変わるかもしれない理由

Webで文字を表示する時、私たちは普段あまりその裏側を意識しません。見出しが出る。本文が折り返される。画像の横に文章が回り込む。段組みになる。そうした表示は当たり前に見えますが、ブラウザの内側では DOM測定、CSS計算、リフロー のような重い処理が何度も走っています。普通のサイトならそれでも問題ありません。ただ、雑誌や新聞のような複雑な文字組みをしようとすると、急に難しくなります。

そこで最近話題になっているのが、CSSの通常レイアウトに頼らず、JavaScript/TypeScript側でテキスト配置を先に計算する Pretext というライブラリです。 GitHubの README では、DOM measurements を避けて、multiline text measurement と layout を高速に行う ライブラリだと説明されています。つまりこれは、単なる新しいUIライブラリというより、Webの文字組みの前提をずらす試みとして見ると面白いです。

結論: Pretextは「文字を表示する」のではなく「文字組みを設計する」ためのライブラリ

GitHub の README では、Pretext は Pure JavaScript/TypeScript library for multiline text measurement & layout と説明されています。要するに、ブラウザに「あとで測ってね」と任せるのではなく、こちら側で先に文字の高さや折り返しを計算し、その結果を使ってUIを組み立てる 方向です。これは今までのWeb制作の感覚だとかなり新鮮です。

普通のWeb制作では、テキストは CSS に流し込むものという前提があります。もちろんその前提は今も有効です。ただ、Pretext のような発想は、雑誌・新聞・エディトリアル寄りの表現 や、細かいUI調整を自前で持ちたい場面 で、かなり魅力があります。

Pretextとは何か

Pretext は Cheng Lou 氏が開発しているライブラリで、公式READMEでは次の2つの用途が前に出ています。

1. DOM measurement をホットパスで使わずに、段落の高さを測る
2. 行ごとの情報を自分で扱って、手動でレイアウトする

デモページでも、Accordion / Bubbles / Dynamic Layout / Editorial Engine / Rich Text / Masonry のようなサンプルが公開されていて、ただのテキスト表示ではなく、可変幅・可変高さ・障害物回避・tight multiline のような表現が中心です。ここが面白いところです。

普通の見方	Pretextの見方
CSSで流し込む	行や高さを先に計算して使う
ブラウザ任せ	アプリ側でレイアウトの主導権を持つ
複雑な文字組みは苦手	画像回り込みや editorial layout の実験がしやすい
高さ確定に DOM read が要る	READMEでは hot path で DOM measurement を避ける設計

なぜこれが面白いのか

本当に面白いのは、ライブラリ名や速さだけではありません。Webのテキストレイアウトを、アプリケーション側の設計対象として扱える 点です。今までのフロントエンドでは、文字の高さや折り返しは「最後にブラウザが決めるもの」でした。でも Pretext は、その一部を「こちら側で予測し、使うもの」に近づけています。

GitHub README では、ベンチマークの checked-in snapshot として prepare() が約19ms、layout() が約0.09ms と書かれています。これはライブラリの公式説明として読むべきで、環境差も当然あります。ただ、ここで重要なのは絶対値よりも、layout を cheap hot path として扱う思想 です。つまり、文字組みをただの見た目ではなく、UIのリアルタイム処理の一部 として扱っているわけです。

これで何が変わるのか

この手のライブラリが効いてくるのは、ただの会社サイトではなく、文字そのものがUIになる場所 です。例えば次のような場面です。

• 雑誌や新聞のようなエディトリアルページ
• 画像や図形を文字が回り込む表現
• テキスト量に応じて tight に伸び縮みするチャットUI
• Pinterest風の masonry で、高さ予測をしたい一覧
• ボタンやラベルのテキスト折り返しを事前に検証したいUI

特に `Editorial Engine` や `Masonry` のデモを見ると、Pretext が強いのは「普通のサイトを作ること」より、これまでブラウザでは面倒だったレイアウトを触りやすくすること だと分かります。

このブログでもそれはできるのか

結論から言うと、部分的にはできます。ただし、いきなりサイト全体を Pretext ベースに置き換えるのはおすすめしません。今の WordPress テーマや記事一覧全体に入れるより、まずは次のどれかから始める方が安全です。

1. 1ページだけの実験ページ: 特集ページやLPで試す
2. ヒーローセクションだけ: タイトルやリード部分だけ特殊文字組みにする
3. デモ記事: 「本当にブラウザで動いているのか？」という体験用ページを作る

つまり、このブログでも「できるか？」という問いには `はい` ですが、正確には サイト全体より、差別化したい一部ページで効く と答えるのが実務的です。

副業や案件でどう活きるのか

このテーマが面白いのは、単なる技術ニュースではなく、案件の切り口 にもなるところです。今は多くの人が AI と Web 制作を「速く作る道具」として見ています。でも、Pretext のような話は「今まで作れなかった表現を、実装可能な提案に変える」方向に効きます。

活かし方	案件や収益へのつながり
ポートフォリオ差別化	「ただ整っているサイト」ではなく、「記憶に残る見せ方」ができる
LP演出	コピーの見せ方が商材の印象に直結する案件で強い
メディア特集ページ	雑誌・新聞・特集のような読み物体験を提案しやすい
フロントエンド研究発信	技術キャッチアップ記事やデモ公開で認知が取りやすい

つまり、Pretextを今すぐ売る必要はありません。むしろ、こういう発想を知っていること自体が、制作や発信の切り口になる という見方の方が現実的です。今の段階では、`案件で即採用` より `先に知っている人が提案で差をつけやすい` テーマだと言えます。

まだ注意すべきこと

• 新しいライブラリなので、まずは実験的に触る方が安全
• 既存のWordPressテーマ全体へ一気に入れるのは相性確認が必要
• 一般的なUIすべてに向くわけではない
• 「普通の本文レイアウト」だけならCSSで十分な場面も多い

つまり、Pretextは「これから全部これになる」ではなく、「今まで面倒すぎて避けていた文字組み表現を、現実の選択肢に近づける」ライブラリとして見るのがちょうどいいです。

よくある質問

PretextはCSSを完全に置き換えるものですか？

そう見るより、テキスト計測とレイアウトの一部をアプリ側で主導しやすくするライブラリと考える方が実態に近いです。通常のサイト全体を丸ごと置き換えるものというより、複雑な文字組みや高度なUIで真価が出ます。

このブログでも使えますか？

使えます。ただし、まずは特集ページやヒーローセクション、デモページなど、限られた範囲から試すのが安全です。WordPress全体をいきなり Pretext ベースにする必要はありません。

副業や案件で今すぐお金になりますか？

今すぐ「Pretext実装案件」が大量にあるというより、先に知っていることで、LPやポートフォリオ、特集ページの提案で差別化しやすいテーマです。技術キャッチアップと発信の両面で価値があります。

公式リンク

• GitHub – chenglou/pretext
• Pretext Demos
• npm: @chenglou/pretext

※2026年3月29日時点で、GitHub README と公式デモを中心に整理しています。ベンチマーク値や実装方針は今後更新される可能性があります。

次に読むべき記事

• AIでサブスク代替ツールを自作する方法｜Claude CodeやCodexで既存ツールを置き換えて副業に変える
• ポートフォリオサイトの作り方｜副業初心者がXserver＋WordPressで受注率を上げる手順
• AIの種類をわかりやすく整理｜生成AI・検索AI・コーディングAI・画像生成AI・動画生成AI・エージェントの違い

まとめ

Pretextが面白いのは、「CSSを壊す」からではなく、文字組みの主導権を少しこちら側に取り戻す 発想にあります。普通のサイトを作るだけなら、今まで通りのHTMLとCSSで十分です。でも、雑誌のようなレイアウト、tightな吹き出し、masonry 的な一覧、画像回り込みのような表現を本気で扱いたいなら、Pretext はかなり刺激的です。こういう新しい発想を早く知っておくこと自体が、これからのWeb制作や発信の差になります。