你在浏览器里按下 CTRL-P 时,大概率会看到一场灾难:导航栏卡在纸页正中、字号大得刺眼、超链接变成灰蒙蒙一片,超长代码块则被硬生生腰斩在两页接缝处。
博主 Brennen Puth 在个人网站发布文章《Websites Should Be Printable》,记录了自己动手改造纯文本个人博客打印样式的经历,随后在技术社区 Hacker News(讨论条目 ID 为 50238763)引发讨论。文章打上了一个略带玩笑性质的 2026 年未来时间戳,作者预计在当年学年结束拿到计算机科学与网络空间作战的双学士学位。他坦言优化耗费了半个上午,但面对代码块跨页断裂依然束手无策,只能公开发文求助。
这一看似微小的尝试,撕开了现代前端工程一个尴尬的角落:我们早已习惯将网页视为无休止滚动的动态应用,而 CSS 标准中沉淀数十年的纸面排版机制,正在沦为无人问津的失落技艺。
半个上午的善意与未竟的代码分页
Brennen Puth 给出的方案非常克制。他没有引入任何臃肿的框架,仅用一段 @media print 样式完成了基础补丁:
通过 .noPrint { display: none; } 摘除页眉导航,避免打印时占据纸面;用 .onlyPrint 补充显示屏幕上隐藏的作者署名与版权归属;强行重写字号比例,将正文收敛为标准的 12pt,标题按级差设定为 13pt 到 16pt;同时将蓝色超链接强制涂黑,并给代码块 .giallo 加上 3px 的黑实线边框。
改动立竿见影,但他遇到了一道坎:代码块排版依然丑陋。长的代码段往往整体抱团,无法在纸张边界处合理折断,或者直接在单页被强行截断,留下巨大的空白与溢出。
作者在文中发问是否有标准解法。事实上,这一困惑恰恰反映了当下的知识断层:前端开发者熟悉屏幕上的弹性盒与网格布局,却普遍对分页媒介的 CSS 规范感到陌生。
被遗忘的 CSS 分页排版规范
要让单段长代码优雅穿过纸张边缘,并不需要高深技巧,而是需要调用早已成型的 CSS 标准属性。
早期开发者习惯使用的 page-break-inside 已经退役,现代浏览器统一转向了 CSS 分页规范(CSS Fragmentation)。Chrome 从 50+ 版本、Firefox 从 65+ 版本起,就已原生支持标准属性 break-inside: avoid;而对于更明确的分页判定 break-inside: avoid-page,Firefox 也在 92+ 版本完成了支持。
要让 <pre> 标签内的代码块兼具自适应与跨页能力,核心在于打破屏幕上的滚动溢出封装:
@media print {
pre, code {
white-space: pre-wrap;
overflow-wrap: anywhere;
overflow: visible;
max-height: none;
break-inside: auto;
}
}
许多网页在打印时代码块被切掉半截,根源在于屏幕样式为了展示滚动条写死了固定高度与隐藏溢出。只要在打印上下文中声明 overflow: visible 并打开软换行,代码就能自然流淌。按照 W3C 规范定义,break-inside: avoid 仅是一种排版偏好而非绝对保证;一旦内容高度超越单页物理上限,排版引擎依然会执行断页,而显式声明 break-inside: auto 能够让引擎在行间进行干净拆分,不再整块卡死。
浏览器早在十余年前就为 @page 规则铺平了路,Chrome 2+ 与 Firefox 19+ 即可解析基础分页,但涉及页眉页脚与动态装订线的高阶特性长期处于生态割裂状态。这种停滞,让物理纸张排版彻底退出了前端社区的中心视线。
纸页隐喻的退潮与工程善意
万维网诞生之初,HTML 借用的是最质朴的出版物隐喻。我们至今依然管每一个 URL 对应的实体叫网页(Web Page)。然而过去十五年间,由移动端浪潮主导的响应式革命重塑了前端:无边界滚动取代了离散翻页,应用化组件挤占了纯文本文档。
这一转变的代价显而易见:当工程师的日常被状态管理、水合性能与动态流加载填满时,面向纸质批注、PDF 归档的高密度阅读需求被边缘化了。
- 提醒.纯文本网站花半天手写打印样式,常常会被追求敏捷的实用主义者视作低效折腾;现代读者若想离线阅读长文,往往直接求助于浏览器的阅读模式(Reader Mode)或稍后读工具,这些工具会直接剥离开发者原本设计的排版与样式。
真正成熟的排版体系,既能托得住动态流,也能在落入纸张时守得住规矩。
实用主义的解法并没有消解纸张的价值。物理纸张与导出 PDF 所承载的严密感、批注自由度,以及脱离屏幕干扰的沉浸体验,仍然是很多开发者沉淀知识的选择。
Brennen Puth 的尝试或许微小,甚至在专业排版专家眼里还带着未经雕琢的粗糙。但这种愿意在纯文本个人主页上为打印留出一块自留地的心思,恰恰守住了软件工程里最稀缺的一种自觉:在屏幕被动态流全面统治的时代,依然有人愿意为极少数喜欢在白纸黑字上圈点批注的读者,认真修整一行代码。
