把《白鲸》整本塞进一个 88×31 像素的网页按钮
来源：k.sosnierz.me — 2024-11-16
📋 概述
作者注意到互联网上历史悠久的小型网站徽章（88×31 按钮）里，动画通常只用来吸引眼球或轮流显示几个词，于是决定把《白鲸》整本书做进一个按钮。技术前提是 GIF 的帧数与分辨率其实非常宽松：最大分辨率可达 2^16×2^16，帧数也看不到上限，因此 88×31 的约束主要落在文字排布上——常规字体在 10 像素高才勉强可读，而专门为极小字号设计的 TomThumb（6×4）能在按钮里放下 5 行、每行 22 个字符。整条流水线是纯 POSIX 工具链：用 cat、tr、fold 把文本整理成 22 字符宽的段落，用 ImageMagick 的 convert 把文本逐帧画到 GIF 上，再裁掉多余的下边距并把帧延时设成 6 秒；若想让文字居中，另附一段 python 脚本自行计算行首空格。
🔑 核心要点
- 动机很直白：常见按钮动画只是抓眼球或轮流显示几个词，「那为什么不做《白鲸》」
- 先摸清 GIF 的余量：帧数看不到上限，最大分辨率 2^16×2^16，即 4295 百万像素
- 真正的约束是文字：Arial 要到 10 像素高才勉强可读，只能一次显示约十一个词
- 解决方案是极小字号字体，作者认为 TomThumb（6×4）是最佳折中，于是按钮内可有 5 行、每行 22 字符
- 排版只用一条管道完成：cat 把换行换成空格，tr 去掉回车，fold -s -w 22 折成 22 字符宽
- 非 ASCII 字符会让 fold 出错，须先行清理；生成用 ImageMagick 逐帧绘制，再裁掉底部 8 像素并把帧延时设为 6 秒
💡 金句
但为什么不是《白鲸》呢？
👍 0
👎 0
← 返回 Lobsters 首页