編輯｜張倩

同人歌曲「Bad Apple」2009 年那個(gè)黑白色剪影風(fēng)格的 MV，如今在 Youtube 上播放量已經(jīng)過(guò)億。

但最近兩天，這個(gè) MV 又有了個(gè)受歡迎的新版本：

視頻鏈接：https://mp.weixin.qq.com/s/tjzWyvA8Am1PbS0dEd7xpw

視頻來(lái)自x用戶@Kevin

這種看上去非常炫酷的文字環(huán)繞、流動(dòng)效果，源自最近兩天在 X 上非?；鸬囊粋€(gè)前端項(xiàng)目 ——Pretext。

這個(gè)項(xiàng)目由前端大神 Cheng Lou 開(kāi)源，是一個(gè)純 JavaScript/TypeScript 的文本排版庫(kù)，能在完全不觸碰 DOM 的情況下實(shí)現(xiàn)極速、精確的文本測(cè)量與布局，速度大約是傳統(tǒng)方案的數(shù)百倍。

在開(kāi)源項(xiàng)目的推文中，Cheng Lou 自稱「曾經(jīng)歷了地獄般的掙扎」，帶來(lái)的是「未來(lái)幾年內(nèi) UI 工程中最重要的基礎(chǔ)設(shè)施之一」，而且明確說(shuō) API 設(shè)計(jì)得「AI-friendly」，讓 AI 編程助手能直接用。

Cheng Lou：React 核心團(tuán)隊(duì)成員，參與 ReactJS 的早期開(kāi)發(fā)；主導(dǎo)了 ReasonML（后來(lái)演變?yōu)?ReScript）的開(kāi)發(fā)；目前在 Midjourney 工作，參與 AI 圖像生成平臺(tái)的開(kāi)發(fā)。

由于重新定義了網(wǎng)頁(yè)上的文字渲染方式，項(xiàng)目發(fā)布即爆火，相關(guān)玩法已經(jīng)在推特上瘋傳，GitHub star 量已經(jīng)超過(guò)一萬(wàn)。

項(xiàng)目鏈接：https://github.com/chenglou/pretext

除了文章開(kāi)頭呈現(xiàn)的 Bad Apple 歌詞動(dòng)態(tài)位移動(dòng)畫(huà)，還有發(fā)光小龍繞文字玩耍：

能實(shí)時(shí)展示胡克定律的物理「課本」：

小球打文字小游戲：

加入重力感應(yīng)的手機(jī)玩法：

在相關(guān)推文中，Cheng Lou 也解釋了他做這個(gè)項(xiàng)目的核心動(dòng)機(jī) ——「文本布局與測(cè)量一直是解鎖更有趣 UI 的最后一個(gè)、也是最大的瓶頸，尤其是在 AI 時(shí)代。解決了這個(gè)問(wèn)題，我們就不再需要在 GL 落地頁(yè)的炫酷和博客文章的實(shí)用性之間二選一了?！?/p>

Cheng Lou 還提到，這個(gè)引擎體積很?。ㄖ挥袔?KB），能理解瀏覽器的各種問(wèn)題，支持你需要的所有語(yǔ)言，包括韓文混 RTL 阿拉伯文以及平臺(tái)特定的 emoji。

為了完成這個(gè)項(xiàng)目，他把瀏覽器的標(biāo)準(zhǔn)基準(zhǔn)數(shù)據(jù)給到 Claude Code 和 Codex 這兩個(gè)工具，讓它們?cè)诟黝愱P(guān)鍵的容器寬度下，對(duì)照這些基準(zhǔn)反復(fù)檢測(cè)、優(yōu)化調(diào)整，這套流程整整跑了好幾周才完成。

就像 Django 框架聯(lián)合創(chuàng)始人 Simon Willison 所說(shuō)，這個(gè)項(xiàng)目的難得之處在于，它解決了在不觸碰 DOM 的情況下計(jì)算一段自動(dòng)換行文本高度的問(wèn)題。通常的做法是把文本渲染出來(lái)再測(cè)量尺寸，但這非常耗時(shí)。Pretext 用了一系列巧妙的技巧讓這個(gè)過(guò)程快得多，從而在瀏覽器應(yīng)用中實(shí)現(xiàn)了各種全新的文本渲染效果。

Simon Willison 進(jìn)一步解釋說(shuō)，Pretext 工作原理的關(guān)鍵在于它如何將計(jì)算分成調(diào)用 prepare（） 函數(shù)，再調(diào)用多次 layout（） 函數(shù)。

prepare（） 函數(shù)將輸入文本拆分為多個(gè)段（實(shí)際上是單詞，但也可以考慮軟連字符、非拉丁字符序列和表情符號(hào)），并通過(guò)屏幕畫(huà)布測(cè)量這些內(nèi)容，然后緩存結(jié)果。這方法相對(duì)昂貴，但只運(yùn)行一次。layout（） 函數(shù)隨后可以在瀏覽器中模擬單詞換行邏輯，計(jì)算文本在指定寬度下會(huì)占用多少行的換行，并測(cè)量整體高度。

不過(guò)，在狂歡之余，有人發(fā)出質(zhì)疑，說(shuō)看不出來(lái)除了娛樂(lè)，這個(gè)項(xiàng)目還有什么用。

還有人說(shuō)自己 15 年前就看到蘋(píng)果在 iPad 上做過(guò)類似的事：

不過(guò)也有人指出，這不是重點(diǎn)，重點(diǎn)是：蘋(píng)果的 Pages / Keynote 是封閉的原生應(yīng)用，只能在 Apple 生態(tài)里用，而 Pretext 是開(kāi)源、純 TypeScript、跨瀏覽器（Chrome/Safari/Firefox） 的 web 解決方案。而且，它讓任何前端開(kāi)發(fā)者都能通過(guò) JS 輕松調(diào)用，實(shí)現(xiàn)以前 CSS 做不到的高性能動(dòng)態(tài)布局。所以，這不是「又一個(gè)炫技 demo」，而是替換 CSS 文本測(cè)量底層的基礎(chǔ)設(shè)施。

Cheng Lou 本人也希望大家能看到項(xiàng)目背后的價(jià)值，而不是一味質(zhì)疑用途。因?yàn)榧夹g(shù)發(fā)展與轉(zhuǎn)型中，既需積累領(lǐng)域經(jīng)驗(yàn)，更要避免經(jīng)驗(yàn)帶來(lái)的過(guò)擬合，保持開(kāi)放視野，方能看到技術(shù)更多的可能性。

如果你還沒(méi)玩過(guò)這個(gè)項(xiàng)目，快去試試吧！