# 策展 · X (Twitter) 🔥

> 作者：Cheng Lou (@_chenglou) · 平台：X (Twitter) · 日期：2026-03-29

> 原始來源：https://x.com/_chenglou/status/2037713766205608234

## 中文摘要

在文字版面配置成為前端介面工程最後的重大瓶頸之際，一套全新的文字測量與排版引擎應運而生。Pretext 是一個純 JavaScript/TypeScript 程式庫，透過放棄傳統 DOM 測量的做法，實現了高達 500 倍的性能提升，徹底改變了網頁介面設計的可能性。

**核心突破**

文字版面配置長期是解鎖更有趣使用者介面的最大瓶頸，特別是在人工智慧時代。Pretext 透過繞過 DOM 測量（如 `getBoundingClientRect()`、`offsetHeight`），避免觸發版面重排（layout reflow）——網路上最昂貴的操作之一——並改以純 JavaScript 演算法實現文字測量邏輯。它將瀏覽器字體引擎作為基準，支援所有語言包括中文、韓文、RTL 阿拉伯文和平台特定的 emoji，同時保持極小的引擎體積（僅數 KB）。

**關鍵功能與應用場景**

- 無 DOM 測量的段落高度計算：單次準備工作（19ms）後，後續版面運算只需純演算法（0.09ms），完全避免版面重排。
- 收縮包裹聊天泡泡（Shrinkwrapped chat bubbles）：二進位搜尋找出最緊湊寬度，使其內部文本確實換行至相同行數，零浪費像素，CSS 的 `fit-content` 做不到。
- 數十萬文字框遮擋虛擬化：無需 DOM 測量，單次線性快取未命中的高度遍歷，滾動與調整大小皆可達 120fps。
- 響應式動態多欄雜誌排版：寬度變化時逐行文字流向。
- 自動成長文字區域、手風琴、多行文字置中、純 Canvas 多行文字等過去 CSS 難題，如今化為平凡細節。

**技術架構與效能**

Pretext 提供兩大 API 分層。使用案例一針對簡單高度計算：`prepare()` 進行一次性文字分析與測量，`layout()` 執行便宜的熱路徑。使用案例二提供手動版面控制：`layoutWithLines()` 回傳固定寬度下的所有行資訊；`walkLineRanges()` 低階 API 可重複測試不同寬度邊界（如二進位搜尋最佳寬度），無需構建行文字字串；`layoutNextLine()` 迭代式 API 支援每行寬度不同的文字流向（例如環繞浮動圖像）。 相容 DOM、Canvas、SVG 及未來的伺服器端渲染。

引擎透過向 Claude Code 和 Codex 展示瀏覽器基準真實值，讓人工智慧迭代測試與完善實現，標誌著人工智慧友善開發方法的實踐案例。

**技術細節與限制**

Pretext 目標為常見文字設定：`white-space: normal`、`word-break: normal`、`overflow-wrap: break-word`、`line-break: auto`。 此外，可選 `{ whiteSpace: 'pre-wrap' }` 選項以保留空格、制表符與硬換行。 在使用上，`prepare()` 函式中的 `font` 參數需與 CSS 的 `font` 簡寫宣告（例如字體大小、粗細、樣式、字體家族）保持同步，其格式應與 `CanvasRenderingContext2D.font` 屬性相同，例如 `16px Inter`。 同樣地，`layout()` 函式中的 `lineHeight` 參數也需與 CSS 的 `line-height` 宣告同步。 引擎本身體積輕巧（數 KB），並能應對各種瀏覽器怪癖，支援包含韓文與從右到左（RTL）阿拉伯文混合以及平台特定 emoji 在內的所有語言。 非常窄的寬度可在 grapheme 邊界內中斷單字，這符合 `overflow-wrap: break-word` 的預設行為。

**應用前景**

Pretext 消除了「華麗的 GL 登陸頁面與務實的部落格文章之間的取捨」，使得文字版面不再成為 UI 工程的桎梏。 它在虛擬化、無 CSS Hack 的自訂版面、人工智慧時代開發驗證（確保按鈕標籤不會溢出）以及防止新文本載入時的版面位移等用途上具有廣泛應用空間。 開發者可透過 `npm install @chenglou/pretext` 安裝，並交由人工智慧生成創意範例展示。

## 標籤

開源專案, Web, 其他, Pretext