从西塞罗到 PageMaker:Lorem Ipsum 的真实历史
Lorem ipsum 不是某位设计师编造的乱码,而是被打乱的西塞罗。出处是公元前 45 年的 De finibus bonorum et malorum(《论善恶之尽》)第 1.10.32–33 节,其中有一句 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...' — 开头的 'lorem' 就是 'dolorem' 被砍掉首音节后剩下的尾巴,所以这段文本是从一个单词的中间开始的。出处直到 1980 年代才被查明:弗吉尼亚州 Hampden-Sydney College 的拉丁语学者 Richard McClintock 在古典文献中追踪罕见词 'consectetur',找到了这段原文。
这段文本的现代生涯有两个起点。1960 年代,Letraset 把它印在干转印字模片上,送到了每一个商业美术部门面前;1985 年,Aldus 把它作为默认占位文本装进了开创桌面出版的 PageMaker,从那里蔓延到所有排版工具、CMS 主题和网站模板。它的长寿有实在的理由:给评审者一段读得懂的占位文字,他们就会开始挑剔措辞而不是版式。无意义却像模像样的文本,能让设计评审始终围绕设计。而它恰好是两千年前关于痛苦与快乐的道德哲学,算得上一个漂亮的反讽 — dolorem ipsum,'痛苦本身'。
让占位文本真正有用的排版数学
占位文本的价值来自统计。英语书面语平均每个单词约 4.7 个字母 — 算上后面的空格约 5.7 个字符 — 而经典排版学把舒适的行长(measure)定在每行 45–75 个字符,Robert Bringhurst 在 The Elements of Typographic Style 中给出的理想值是 66 个字符(经验法则版本:2–3 套小写字母表,即 52–78 字符)。Lorem ipsum 的词长分布与英语足够接近,灌进一个栏里时,换行、断字、右缘参差的方式都近似真实散文,因此你能诚实地评估行长、行距和字号。这正是 'asdf asdf asdf' 做不到的:重复的相同单词会在行与行之间垂直对齐,制造出假的空白河流(river),均匀的纹理把好排版和坏排版一起藏了起来。
拉丁词汇还能检验纵向节奏。'aliquip'、'suscipit' 这类单词以自然的频率混合上伸部(l、t、b)和下伸部(p、q、g),在没有上伸部的字符串里看似正常的行距,到这里就会暴露碰撞。但 lorem 也有测不到的东西:大写字母只出现在句首(没有全大写标题),没有数字,也没有粗体/斜体的行内强调 — 如果你的设计依赖其中任何一项,请刻意插入真实样本。
Measure math for a body-text column:
66 chars/line ÷ 5.7 chars/word ≈ 11.6 words per line
avg glyph width ≈ 0.5em → 66 chars ≈ 33em ≈ 528px @ 16px
45–75 char range ≈ 22.5–37.5em ≈ 360–600px column widthLorem Ipsum 误导你的地方 — 以及伪本地化
Lorem ipsum 只有一种形态:用空格分隔的中等长度欧洲语单词。真实内容的凶险方式,这种形态永远预测不到。德语平均比英语长约 30%,还会造出 'Eingabeaufforderung'(命令提示符)这种在固定宽度按钮里拒绝换行的单个复合词。芬兰语和土耳其语会往 UI 标签上不断黏着后缀。中日韩文本比其翻译来源的英文更致密,词与词之间没有空格,几乎任何位置都能断行 — 所以只用 lorem 测过的版式,从未经受过 line-break: strict、word-break 规则或 CJK 特有的无连字符溢出的考验。阿拉伯语和希伯来语在 direction: rtl 下会把整个布局镜像翻转。泰语同样没有词间空格,需要基于词典的断行。
工程侧的解法是伪本地化(pseudo-localization):把真实 UI 字符串灌进一个转换器,把字母换成带音标的形似字符并把长度加长约 40% — 'Account Settings' 变成 '[!!! Àççôûñţ Šéţţîñĝš !!!]' 之类 — 然后用这个假 locale 跑应用。截断、挤爆的按钮、硬编码的字符串拼接会立刻现形,连一位翻译都还没请。Microsoft 和 Netflix 都把它内建进了 CI。
设计侧的批评更进一步:'design with real content' 运动把 lorem ipsum 称为 design debt — 针对理想文本优化的版式,在真实姓名和邮箱面前会塌掉。务实的折中是值形态正确的仿真代理内容 — 姓名字段用 'Alexandria Papadopoulos-Vanterpool' 测,邮箱用 RFC 上限 254 字符的地址测,卡号用 19 位数字测。
// pseudo-localization: expand + accent real strings
"Save changes" → "[!!! Šàvé çhàñĝéš !!!]"
"Account Settings" → "[!!! Àççôûñţ Šéţţîñĝš !!!]"
// German-length reality check for a fixed-width button
"Edit" → "Bearbeiten" (2.5x wider)
"Command prompt" → "Eingabeaufforderung" (one unbreakable word)工程工作流中的 Lorem:随机种子、快照与 CI 守卫
占位文本的用途远超原型图,而工程场景里反复出现的需求是确定性(determinism)。faker.js(@faker-js/faker)和 Ruby/Python 的 Faker 系列库在姓名、地址之外也提供 lorem.paragraphs(),关键是它们接受随机种子:调用 faker.seed(42) 后,数据库 fixture 每次运行都逐字节一致,失败的测试在同事机器上也能复现。同样的规则支配视觉回归测试 — 对着用未加种子的 Math.random() 生成的 lorem 做截图 diff,每跑一次就是一个新的"失败";要么把生成文本冻结进 fixture,要么给 RNG 加种子。压力测试则需要字段长度真实的 lorem:用 10 个字符的字符串压测过的评论表,完全说明不了 2KB 的评论会对列宽和索引页做什么。
还有一类每个团队迟早都会加入的事故:lorem 被发布到了生产环境。留在首屏横幅、法律条款页或交易邮件模板里的占位段落,恰恰因为所有人的目光都会滑过去而通过了评审。Google 曾多次收录数千个仍含 'lorem ipsum' 的线上页面,而爬虫可能把它归类为 boilerplate,这同时也是 SEO 问题。廉价的解法是 CI 守卫:在生产构建产物里 grep 这个字符串,命中就让流水线失败。一行 shell,就把一类丢脸的 bug 变成了一个红叉。
// reproducible fixtures with a seeded generator
import { faker } from '@faker-js/faker';
faker.seed(42);
const body = faker.lorem.paragraphs(3); // identical every run
# CI guard: never ship placeholder text
if grep -ri "lorem ipsum" dist/; then
echo "Placeholder text found in production build" && exit 1
fiBacon Ipsum 及其伙伴:变体、彩蛋与风险
当 lorem 成为基础设施,一个玩梗生态随之生长。Bacon Ipsum 在拉丁文里穿插腌熏肉制品,Cupcake Ipsum 通篇甜点,Hipster Ipsum、Cat Ipsum、Pirate Ipsum 顾名思义。'Li Europan lingues' 则是另一回事 — 它是人工语言 Occidental 的示例段落,作为替代填充文本流传。较真的人还可以在打乱的经典版和西塞罗未打乱的原文拉丁语之间做选择。主题化 ipsum 确实能让内部演示不那么干瘪,但它带着经典文本没有的职业风险:满是脏话的电影台词变体 'Samuel L. Ipsum' 的段落出现在客户演示或销售 PPT 截图里,是真实且反复发生的故事。经典文本的寡淡是一种功能 — 至今还没有人因为它道过歉。