新聞

曾是React核心貢獻者、現任Midjourney工程師Cheng Lou開源Pretext，這是一個以純TypeScript實作的文字排版引擎，能在完全不觸及DOM的情況下，以算術運算完成多行文字的測量與排版。根據Cheng Lou提供的基準測試，在需要反覆計算文字高度的熱路徑（Hotpath）場景中，Pretext的效能約為傳統DOM測量方式的500倍，但這個比較未納入一次性的初始測量成本，作者也坦言並非完全對等。

Cheng Lou展示的Pretext範例包括可精準貼合文字寬度的聊天氣泡、可即時重排的多欄雜誌式版面、自動展開與收合的手風琴元件、可變字寬ASCII藝術，以及純Canvas多行文字算繪。這些原本多半得透過DOM量測處理的排版效果，現在可改以算術方式完成，減少觸發瀏覽器重新計算版面reflow。

傳統網頁瀏覽器測量文字尺寸的做法，是將文字算繪到DOM中，再透過getBoundingClientRect()或offsetHeight等API讀取結果。該機制在單次操作時影響不大，但當UI需要大量且頻繁地測量文字高度，且DOM讀寫交錯的情況下，這類讀取容易觸發瀏覽器同步版面計算，甚至反覆重算版面，形成效能瓶頸。

Pretext把文字排版分成兩步。第一步的prepare()函式會先整理字串，依語言排版規則切分成多個段落片段，並透過Canvas的文字量測功能量出各片段的寬度，快取成一個可重用的資料結構。第二步的layout()函式則完全不碰DOM，而是直接在記憶體中，根據容器寬度與行高，利用已快取的寬度做純算術運算，推算文字會分成幾行，以及整段文字的總高度。因為這一階段不需要再量測文字，只做加總與比較，所以在容器寬度改變時，只要重新執行layout()就能很快重新計算高度。

在國際化支援上，Pretext使用瀏覽器原生的Intl.Segmenter進行語言感知分段，可處理中日韓斷行，以及阿拉伯文等右至左文字與英文、數字混合排版，以及不同平臺的表情符號差異。Cheng Lou在GitHub提供多語測試語料，涵蓋泰文、中文、韓文、日文與阿拉伯文等公領域長篇文本，並透過與瀏覽器實際算繪結果逐一比對，驗證其排版準確性。

Cheng Lou在X社群貼文中提到，Pretext的開發大量使用Claude Code與Codex。他將瀏覽器的實際算繪結果作為比對基準提供給AI，讓AI在各種關鍵容器寬度下反覆測量、比對、修正，整個迭代過程花了數周。Pretext現以MIT授權釋出，檔案大小僅數KB，可透過NPM安裝使用，目前GitHub星數已突破二萬。