CSS を使わずにテキストを配置——30 年の常識を壊す「Pretext」ライブラリが話題

2026 年 3 月、Midjourneyのエンジニアが開発した**「Pretext」**というライブラリが、海外で大バズしている。

CSS を使わずにテキストを配置するという、**「30 年の常識を壊すライブラリ」**だ。

本稿はこのライブラリの概要、仕組み、そしてパフォーマンスを解説する。

従来の Web のテキスト表示

Web でテキストを表示するとき、裏側では以下の処理が走っている。

DOM 測定 → CSS 計算 → リフロー（再描画）

この仕組みが90 年代から基本変わってなくて、そしてこれが遅いという問題がある。

従来の問題

雑誌みたいにテキストが画像を回り込んだり、新聞みたいに段組みになったり、こういうレイアウトを Web でやろうとすると、毎回このリフローが走って重くなる。

Pretext の仕組み

Pretextはこのプロセスを完全にバイパスする。

特徴

• TypeScript だけ - C++ や Rust を使わずに TypeScript だけで実装
• 独自計算 - テキストの位置を独自に計算
• DOM 測定なし - DOM 測定を通さない
• CSS なし - CSS を通さない

パフォーマンス

GitHub のベンチマークによると、layout() の処理が約 0.09ms で完了する。

開発者

このライブラリは、Midjourney のエンジニアが開発している。

Josh Kale 氏

Josh Kale氏（@JoshKale）は、Bankless の Host & Producer を務めている。

Host & Producer @LimitlessFT & @Bankless | Curiously thinking about the future

30 年の常識を壊す

このライブラリが**「30 年の常識を壊す」**と言われる理由は、Web のテキスト表示の仕組みそのものを変えているからだ。

従来の常識

• DOM 測定 - DOM のサイズを測定
• CSS 計算 - CSS でレイアウトを計算
• リフロー - 再描画を実行

Pretext の常識

• 独自計算 - TypeScript で独自に計算
• DOM なし - DOM 測定なし
• CSS なし - CSS なし

パフォーマンス

ベンチマーク

GitHub のベンチマークによると：

• layout() 処理: 約 0.09ms
• 従来: 数 ms〜数十 ms

比較

実装方法

基本的な使い方

import { Layout } from 'pretext';

const layout = new Layout();
layout.addText('Hello, World!');
layout.calculate();

高度な使い方

// テキストの追加
layout.addText('Text content', {
  x: 0,
  y: 0,
  width: 100,
  height: 50
});

// 画像の回り込み
layout.addImage(image, {
  wrap: true
});

// 段組み
layout.setColumns(2);

使用例

雑誌レイアウト

雑誌みたいにテキストが画像を回り込むレイアウト。

新聞レイアウト

新聞みたいに段組みになったレイアウト。

Web レイアウト

Web での複雑なテキストレイアウト。

課題と制限

1. ブラウザサポート

ブラウザのサポート状況に注意が必要だ。

2. 既存ライブラリとの互換性

既存の CSS ベースのライブラリとの互換性に注意が必要だ。

3. 学習曲線

新しいパラダイムを学ぶ必要がある。

結論：Web レイアウトの新時代

Pretext は、Web のテキストレイアウトの新時代を告げるライブラリだ。

• 30 年の常識を壊す - DOM 測定も CSS も通さない
• TypeScript だけ - C++ や Rust を使わない
• 高速 - 約 0.09ms で完了
• Midjourney 製 - 信頼性の高い開発チーム

このライブラリは、Web のテキスト表示の常識を大きく変える可能性がある。

参考：

• すぐる氏の X 投稿
• Josh Kale 氏の X 投稿