Midjourney工程師開源Pretext，以純算術突破網頁文字排版長年效能瓶頸

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星數已突破二萬。