Pretext：重新看不使用 DOM 回流進行文字測量與排版
Pretext 使用 Canvas、DOM 和 OpenType 資料來測量和佈局 Web 應用程式中的多語言文本，以產生可預測的換行符和尺寸。
秒懂
- 它是什麼？
- 一個 TypeScript 函式庫，利用瀏覽器自身的字型引擎測量和排列多行文字，而不觸發版面回流。 聚焦本專案的實際功能、技術入口、部署條件、資料流、版本變化與授權邊界，並依官方 README 所列能力判斷適用工作情境和不適合的替代用途。
- 適合誰用？
- Pretext 使用 MIT 授權，指向其開發說明和平台 bug 清單，但未記錄版本號、基準測試與安全保證。 適合願意依 README 逐項驗證的人，不適合把功能清單當成保證的人；先用 chenglou-pretext 的具體入口、指令與設定檔跑通最小案例。
- 可以商用嗎？
- 可以。MIT 是寬鬆授權：你可以使用、修改並販售以它為基礎的軟體，只需保留著作權與授權聲明。
- 還在維護嗎？
- 有在維護。儲存庫在最近一天內有新的提交。
- 用什麼語言寫的？
- 主要是 TypeScript（依據 GitHub 的語言統計）。
以上回答依據專案的 GitHub 資料（最近同步於 2026年9月15日）與我們的分析，不構成法律意見。
開源專案深度解析
chenglou-pretext-deep-analysis｜從 繞開 DOM 進行文字測量 讀懂 chenglou-pretext
chenglou-pretext-deep-analysis｜從 繞開 DOM 進行文字測量 讀懂 chenglou-pretext 的專案脈絡：Pretext 是一個純 JavaScript 和 TypeScript 函式庫，用於多行文字測量和排版。README 稱其快速且準確，支援許多你可能沒想過的語言，並可渲染到 DOM、Canvas、SVG，很快還能用於伺服器端。它不呼叫 getBoundingClientRect 或 offsetHeight 這類會觸發版面回流的 DOM 測量，而是利用瀏覽器自身的字型引擎作為基準來實作自己的測量邏輯。該函式庫並不聲稱是完整的字型渲染引擎，而是針對一組特定的 CSS 文字特性。
chenglou-pretext-deep-analysis｜從 繞開 DOM 進行文字測量 讀懂 chenglou-pretext：Pretext 的核心不是一般 DOM 排版，而是以 prepare 和 layout 兩階段 API 量測文字並產生版面。使用時應拿 README 的示範輸入跑過完整流程，分別查看量測高度、逐行結果與富內聯流，才能知道它適合哪一種渲染器。 專案刻意避開 DOM 回流，對需要預先知道文字高度的編輯器、虛擬清單或畫布介面有直接價值。檔案沒有說明所有瀏覽器、字型和複雜 CSS 的相容範圍，所以實作不能只以簡單英文句子作結論。 本節檢查索引 0 對應 chenglou-pretext。
chenglou-pretext-deep-analysis｜實作中的 prepare 與 layout 的兩階段 API 邊界
chenglou-pretext-deep-analysis｜實作中的 prepare 與 layout 的兩階段 API 邊界 的專案脈絡：第一個公開用例是在不接觸 DOM 的情況下測量段落高度。prepare() 負責一次性工作：正規化空白、分割文字、套用膠合規則、用 canvas 測量分段，並回傳一個不透明 handle。layout() 隨後基於快取的寬度做純算術運算，接收最大寬度和行高，回傳 height 和 lineCount。README 建議不要對相同文字和設定重複呼叫 prepare()，否則會失去預先計算的意義；在調整尺寸時只需重新呼叫 layout()。選項包括 whiteSpace: 'pre-wrap'，用於保留普通空格、Tab 和硬換行，以及 wordBreak: 'keep-all' 和以像素值傳入的 letterSpacing。
chenglou-pretext-deep-analysis｜實作中的 prepare 與 layout 的兩階段 API 邊界：專案刻意避開 DOM 回流，對需要預先知道文字高度的編輯器、虛擬清單或畫布介面有直接價值。檔案沒有說明所有瀏覽器、字型和複雜 CSS 的相容範圍，所以實作不能只以簡單英文句子作結論。 Pretext 的核心不是一般 DOM 排版，而是以 prepare 和 layout 兩階段 API 量測文字並產生版面。使用時應拿 README 的示範輸入跑過完整流程，分別查看量測高度、逐行結果與富內聯流，才能知道它適合哪一種渲染器。 本節檢查索引 1 對應 chenglou-pretext。
chenglou-pretext-deep-analysis｜以 chenglou-pretext 驗證 測量高度可以用在哪些地方
chenglou-pretext-deep-analysis｜以 chenglou-pretext 驗證 測量高度可以用在哪些地方 的專案脈絡：README 列出四個用途：在不做猜測和快取的情況下實現虛擬化或遮擋；建立 masonry 或 JS 驅動的 flexbox 類實作等使用者態版面；在開發階段驗證標籤不會溢出到下一行，作者指出這對 AI 生成程式碼尤其有用；以及在新文字載入時防止版面位移並重新錨定捲動位置。函式庫也說明，layout() 對空字串回傳 lineCount 為 0、height 為 0，而瀏覽器仍會把空塊的高度設為一行 line-height，因此呼叫者可以用 Math.max(1, lineCount) * lineHeight 來鉗製。
chenglou-pretext-deep-analysis｜以 chenglou-pretext 驗證 測量高度可以用在哪些地方：Pretext 的核心不是一般 DOM 排版，而是以 prepare 和 layout 兩階段 API 量測文字並產生版面。使用時應拿 README 的示範輸入跑過完整流程，分別查看量測高度、逐行結果與富內聯流，才能知道它適合哪一種渲染器。 專案刻意避開 DOM 回流，對需要預先知道文字高度的編輯器、虛擬清單或畫布介面有直接價值。檔案沒有說明所有瀏覽器、字型和複雜 CSS 的相容範圍，所以實作不能只以簡單英文句子作結論。 本節檢查索引 2 對應 chenglou-pretext。
chenglou-pretext-deep-analysis｜資料流如何落到 chenglou-pretext
chenglou-pretext-deep-analysis｜資料流如何落到 chenglou-pretext 的專案脈絡：第二個用例將行版面的控製權交給呼叫者。prepareWithSegments() 回傳更豐富的結構，layoutWithLines() 在固定寬度下回傳各行。更底層的 walkLineRanges() 和 measureLineStats() 提供行數、寬度和游標，而無需建立文字字串；layoutNextLineRange() 搭配 materializeLineRange() 允許每一行使用不同寬度，例如讓文字繞過一個浮動圖片。@chenglou/pretext/rich-inline 中的輔助函式處理內聯富文字，支援逐項字型、字間距、用於膠囊狀裝飾的 extraWidth，以及用於 chip 和 mention 等原子元素的 break: 'never'。它刻意只支援 white-space: normal，並非通用的 CSS 內聯格式化引擎。
chenglou-pretext-deep-analysis｜資料流如何落到 chenglou-pretext：專案刻意避開 DOM 回流，對需要預先知道文字高度的編輯器、虛擬清單或畫布介面有直接價值。檔案沒有說明所有瀏覽器、字型和複雜 CSS 的相容範圍，所以實作不能只以簡單英文句子作結論。 Pretext 的核心不是一般 DOM 排版，而是以 prepare 和 layout 兩階段 API 量測文字並產生版面。使用時應拿 README 的示範輸入跑過完整流程，分別查看量測高度、逐行結果與富內聯流，才能知道它適合哪一種渲染器。 本節檢查索引 3 對應 chenglou-pretext。
chenglou-pretext-deep-analysis｜部署條件與 注意事項、執行環境需求與未說明之處
chenglou-pretext-deep-analysis｜部署條件與 注意事項、執行環境需求與未說明之處 的專案脈絡：README 列出 Pretext 目前支援的文字特性：white-space 的 normal 和 pre-wrap，word-break 的 normal 和 keep-all，overflow-wrap 的 break-word，line-break 的 auto，letter-spacing 作為數值像素值，以及 Tab 按瀏覽器預設的 tab-size: 8 處理。它需要 Intl.Segmenter 和 Canvas 2D 文字測量；不支援沒有 Intl.Segmenter 的執行環境。system-ui 在 macOS 上被標記為對 layout() 精度不安全，並指向一個平台 bug 清單。軟連字元被視為可選斷點，但未內建自動斷詞。來源沒有提及具體版本號、基準測試、生產結果或安全保證，這些仍是待驗證的問題。
chenglou-pretext-deep-analysis｜部署條件與 注意事項、執行環境需求與未說明之處：Pretext 的核心不是一般 DOM 排版，而是以 prepare 和 layout 兩階段 API 量測文字並產生版面。使用時應拿 README 的示範輸入跑過完整流程，分別查看量測高度、逐行結果與富內聯流，才能知道它適合哪一種渲染器。 專案刻意避開 DOM 回流，對需要預先知道文字高度的編輯器、虛擬清單或畫布介面有直接價值。檔案沒有說明所有瀏覽器、字型和複雜 CSS 的相容範圍，所以實作不能只以簡單英文句子作結論。 本節檢查索引 4 對應 chenglou-pretext。
chenglou-pretext-deep-analysis｜使用前要核對的 安裝、示範與授權
chenglou-pretext-deep-analysis｜使用前要核對的 安裝、示範與授權 的專案脈絡：安裝透過 npm 使用 @chenglou/pretext。示範需要複製倉庫並執行 bun install 和 bun start，然後在瀏覽器中開啟 /demos/index；在 Windows 上，README 說應使用 bun run start:windows。即時示範位於 chenglou.me/pretext，另一組示範位於 somnai-dreams.github.io/pretext-demos。倉庫採用 MIT 授權，版權歸 Pretext 貢獻者，年份為 2026。授權授予使用、複製、修改、合併、發佈、分發、再授權和銷售副本的權利，並聲明軟體按「原樣」提供，不提供任何形式的擔保。授權沒有提及支援、維護或安全狀況。開發說明指向 DEVELOPMENT.md，致謝部分將初始設計歸功於 Sebastian Markbage 早期的 text-layout 工作。
chenglou-pretext-deep-analysis｜使用前要核對的 安裝、示範與授權：專案刻意避開 DOM 回流，對需要預先知道文字高度的編輯器、虛擬清單或畫布介面有直接價值。檔案沒有說明所有瀏覽器、字型和複雜 CSS 的相容範圍，所以實作不能只以簡單英文句子作結論。 Pretext 的核心不是一般 DOM 排版，而是以 prepare 和 layout 兩階段 API 量測文字並產生版面。使用時應拿 README 的示範輸入跑過完整流程，分別查看量測高度、逐行結果與富內聯流，才能知道它適合哪一種渲染器。 本節檢查索引 5 對應 chenglou-pretext。
編輯結論
Pretext 使用 MIT 授權，指向其開發說明和平台 bug 清單，但未記錄版本號、基準測試與安全保證。 適合願意依 README 逐項驗證的人，不適合把功能清單當成保證的人；先用 chenglou-pretext 的具體入口、指令與設定檔跑通最小案例。
社群筆記