Pretext.JS 概述
Pretext.JS 是一個高速、純 JavaScript/TypeScript 的文字排版引擎，專門用來透過純算術運算來測量與定位多行文字，完全不觸碰 Document Object Model (DOM)。它消除了傳統透過 getBoundingClientRect() 等 DOM 測量方式所造成的「強制同步重排（forced synchronous reflows）」效能瓶頸，提供極快且高效率的文字排版能力。其核心理念是「只量一次，之後排版都瞬間完成」，讓後續的排版計算幾乎是即時的。
主要目的
提供高效能、精準且不觸發 reflow 的文字排版量測（例如高度與行數），用於動態且複雜的網頁介面。它解決了因重複 DOM 測量而導致瀏覽器頻繁抖動（thrashing）的關鍵效能問題。
目標使用族群
建構高效能、文字內容量大介面的網頁開發者與團隊。包括使用虛擬捲動清單、AI 聊天介面、程式碼編輯器、協作白板、資料視覺化，以及所有需要動態文字排版同時又要求流暢、快速且高回應性的場景，而不犧牲使用者體驗。
功能細節與運作方式
Pretext.JS 的運作分為兩個核心步驟：
-
prepare(text, font)
對特定文字字串與字型樣式執行一次。此函式會正規化空白字元、套用 Unicode 換行規則、將文字切分成片段，並透過瀏覽器的 Canvas 字型引擎精確量測每一段 glyph 的寬度進位。結果會快取在一個可重複使用的「handle」中。 -
layout(handle, containerWidth, lineHeight)
這個函式完全是算術運算，執行速度極快。給定前面準備好的 handle、容器寬度與行高後，它會透過累加文字片段寬度來計算換行位置、總行數，並得到整體文字高度。關鍵是：此步驟完全不讀取任何 DOM，因此不會產生 reflow。
主要能力
-
零 DOM 讀取
在完成第一次prepare()呼叫後，所有layout()操作都是純算術運算，完全避開getBoundingClientRect()、offsetHeight等 API，杜絕強制同步重排。 -
真實字型度量
使用瀏覽器內建的 Canvas 字型引擎來量測 glyph 寬度，確保排版結果與實際瀏覽器渲染高度一致。 -
天生支援多語系
原生支援包含中日韓（CJK）、阿拉伯文、希伯來文、泰文、印地文在內的複雜書寫系統，並具備正確的 Unicode 分段與雙向文字處理能力。 -
TypeScript 原生支援
自底層以 TypeScript 開發，為所有函式、參數與回傳值提供精準型別定義，不需要額外安裝@types套件。 -
可重複使用的 Prepared Handles
單次prepare()呼叫就能產生一個 handle，可在不同容器寬度（例如手機、平板、桌面版）下重複用於排版計算，額外開銷極低。 -
零執行階段相依性
完全建立在標準瀏覽器 API 上，不依賴外部函式庫，封包體積小且不會有第三方套件的不穩定問題。
使用者效益
-
極致效能
相較傳統 DOM 排版方法，文字排版效能可提升至最多約 500 倍，即使同時處理上千個動態文字元素，也能維持順暢的 60fps 捲動與高度回應性的使用者介面。 -
優化使用者體驗
消除介面「抖動」、位移與跳動現象，提供流暢、穩定的視覺體驗，尤其適用於動態內容串流或聊天介面。 -
排版精準
確保文字量測與瀏覽器實際渲染結果完全對齊，避免出現視覺誤差與不一致。 -
簡化開發流程
透過簡潔、TypeScript 原生的 API，封裝複雜的文字量測與換行邏輯，顯著提升開發效率。 -
全球化應用就緒
強大的多語系支援能力，讓開發者能輕鬆構建真正國際化的應用程式。 -
輕量且穩定
沒有外部依賴，使得封包更小、部署更輕便，也減少相容性與維護風險。
相容性與整合方式
-
不綁定任何框架
作為純 JavaScript/TypeScript 函式庫，Pretext.JS 能無縫整合進任何現代前端框架（例如 React、Vue、Angular、Svelte），或是純原生 JavaScript 專案中。 -
支援現代瀏覽器
僅依賴所有現代瀏覽器環境都提供的標準 API。 -
安裝方式
可透過常見套件管理工具快速安裝：npm、pnpm 與 bun。 -
TypeScript 整合
原生 TypeScript 支援，無需額外設定即可順利整合至 TypeScript 專案。
實際應用與示範
-
虛擬捲動列表（Virtual Scroll）
示範渲染 10,000 筆高度不一的列項，同時維持順暢的 60fps 捲動，過程完全不進行任何 DOM 讀取。 -
AI 聊天介面
用於預先計算 AI 串流回應的聊天氣泡高度，徹底消除版面跳動與重排問題。 -
國際化內容
展示在單一虛擬列表中，同時混合顯示中文、阿拉伯文、韓文與拉丁字母等多語系內容時，依然保持準確的排版表現。 -
社群作品展示
收錄創意應用範例，例如沙寫效果、幾何文字視覺化、即時 3D 物件包覆文字等，凸顯其高度彈性與多樣化的互動數學內容。
取得與啟用方式
-
安裝
- 使用 npm：
$ npm install @chenglou/pretext - 使用 pnpm：
$ pnpm add @chenglou/pretext - 使用 bun：
$ bun add @chenglou/pretext
- 使用 npm：
-
使用步驟
- 匯入
prepare與layout函式：
import { prepare, layout } from '@chenglou/pretext' - 呼叫一次
prepare(text, font)取得可重複使用的 handle。 - 之後呼叫
layout(handle, containerWidth, lineHeight)，即可瞬間取得文字高度與行數。
- 匯入
-
線上體驗
官方網站（pretextjs.dev）提供即時 playground 與多種示範範例，可直接在線上測試與理解 Pretext.JS 在網頁數學互動與 PreTeXt 文件渲染上的效能與表現。
