VibeCoding
← 返回首頁
Cheng Lou
Cheng Lou
@_chenglou
♥62,228🔁 7,827
𝕏 (Twitter)🔥🔥
📎 來源文章 ↗查看原文 ↗

AI 語音朗讀 · Edge TTS

AI 中文摘要Claude 生成

在文字版面配置成為前端介面工程最後的重大瓶頸之際，一套全新的文字測量與排版引擎應運而生。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 安裝，並交由人工智慧生成創意範例展示。

延伸閱讀

Pretext 是一套純 JavaScript/TypeScript 程式庫
github.com
技術突破堪比基礎設施級別
twitter.com
`prepare()` 進行文字分析測量
github.com
縮放自適應聊天泡泡
chenglou.me