引言
你有没有想过，为什么网页上的文字排版三十年来几乎没有变过？
在浏览器诞生之初，文本渲染管线就被设计为服务于静态文档。字体加载、字形测量、断行计算——每一个步骤都依赖前一步，每一步都需要浏览器的布局引擎介入。这套管线对于博客文章来说足够快，但当我们需要构建实时交互的排版体验时，它就成了瓶颈。
DOM 测量的代价
在传统 Web 开发中，要测量一段文字的高度，你必须把它渲染到 DOM 里，然后通过 getBoundingClientRect 或 offsetHeight 来读取。这听起来没什么，但每一次这样的测量都会触发浏览器的布局回流（Layout Reflow）——浏览器需要重新计算页面上所有元素的位置。
测量 500 段文字？那就是 500 次完整的布局回流，累计耗时可能超过 30 毫秒。在一个 60fps（每帧 16.7ms）的渲染循环中，这简直是灾难。Chrome DevTools 会用愤怒的红色标记来提醒你，Lighthouse 会扣你的性能分，但开发者别无选择——CSS 没有提供不渲染就测量文字的 API。
一个新的思路：Pretext
下面这个演示展示了完全不同的文字排版方式。零次 DOM 测量，零次布局回流，60fps 实时文字绕排动画。
?? 试试看：拖拽那些发光球体，文字会自动绕开它们重新排列。点击球体可以暂停/恢复动画。在窄屏幕上（手机端）会自动切换为单栏布局。
它背后的原理
上面这个演示的核心是一个名为 Pretext 的轻量库（仅 15KB，零依赖）。它的核心洞察非常巧妙：
Canvas 的 measureText 方法可以测量文字宽度，而且不触发布局回流。
Canvas 使用的字体引擎和 DOM 渲染是同一套——结果完全一致。但因为 Canvas 操作在布局树之外，它没有回流惩罚。
Pretext 的两阶段设计：
| 阶段 | 做什么 | 耗时 |
|---|---|---|
prepare() |
一次性分词、Canvas 测量字宽、缓存结果 | ~5ms（只做一次） |
layout() |
纯算术计算行高和断行位置 | ~0.0002ms（每次 resize 都跑） |
性能提升不是渐进的，而是类别性的——从 30ms 降到 0.05ms，快了 600 倍。
多栏文字流
多栏文字流配合游标传递（cursor handoff）是另一个 CSS 望尘莫及的能力：没有重复，没有间隙，栏与栏之间完美衔接。这是报纸和杂志在纸媒时代就做到的事情，但在网页上——直到现在——一直是难以实现的。
下面这个演示使用了一段自定义中文内容：
技术如何重塑内容创作
在过去十年中，内容创作领域经历了翻天覆地的变化。从博客到短视频，从图文到直播， 创作者们不断探索新的表达方式。而在这一切变化的背后，是技术的持续演进。 语言模型的出现让机器首次真正理解了人类的意图。不再需要精确的关键词匹配， 不再需要死板的命令语法——你只需要像和人对话一样表达你的想法， AI 就能理解并执行。这是一个从"人类适应机器"到"机器适应人类"的范式转变。 对于内容创作者来说，这意味着效率的指数级提升。过去需要数小时完成的研究、 草拟、润色流程，现在可以在几分钟内完成初稿。创作者可以把更多精力放在 创意本身——选题的深度、观点的独特性、叙事的节奏感。 但技术从来不是万能的。它可以帮助我们更快地到达起点，但终点在何处、 沿途的风景如何，仍然取决于创作者自身的视野和品味。工具会不断进化， 但好故事的灵魂——对人性的洞察、对世界的思考、对美的追求——永远不会过时。 我们正站在一个新时代的门槛上。未来的内容创作将是人与AI的协作， 而非替代。那些善于利用工具、同时又保持独立思考的创作者， 将在这个时代脱颖而出。总结
Web 文本排版的未来已经到来。不再依赖 DOM 测量的文字排版，意味着：
-
虚拟滚动不再靠猜测高度
-
文字可以实时绕任意形状流动
-
瀑布流布局可以精确计算每张卡片的高度
-
Canvas/SVG/WebGL 渲染可以获得精确的文字排版
十五 KB，零依赖，零 DOM 读取。文字终于流动起来了。
本文中的互动演示基于 Pretext 开源项目，通过自定义 Hexo 标签插件实现。