3.8 KiB
3.8 KiB
《关于「甲子」的虚构故事》公众号推送 Demo
一个 28 列 × 44 行的汉字文字画单页。黑底、每格一个汉字，空白处由淡色「天」铺满；画面包含晚霞云、落日、飞鸟、天线与城市楼群，上方以整格扣出的黑色标题框居中呈现「关于「甲子」的虚构故事」。
效果概述
- 28 列 × 44 行，严格按字符网格排布，全页文字统一字号。
- 空白格自动填充淡色「天」，形成低对比背景纹理。
- 元素按层绘制：云 → 落日 → 飞鸟 → 天线 → 楼群。楼群最后绘制，保证太阳在无楼处仍保留完整圆弧。
- 标题区域按整格对齐扣空，并叠放黑色面板，居中显示白色标题。
- 使用 Zpix 像素字体；正文行通过负字距补偿，把单字步进压回 1em。
目录结构
.
├─ index.html # 页面骨架
├─ pyproject.toml # uv 环境与导出依赖
├─ uv.lock # 依赖锁定
├─ scripts/export_pdf.py # PDF 导出脚本
├─ 封面demo.pdf # 导出的 PDF 样例
├─ assets/
│ ├─ css/style.css # 布局、字号与各元素配色
│ ├─ js/scene.js # 场景数据与网格渲染
│ └─ fonts/zpix.ttf # Zpix 像素字体
└─ references/a.html # 原始参考页
运行
直接打开 index.html 即可。若需通过本地服务器预览：
python -m http.server 8000
# 浏览器访问 http://localhost:8000
导出 PDF
使用 Playwright（由 uv 管理）导出，页面尺寸为 30em × 46em：28 × 44 格的画面，四周各留恰好 1em。
uv sync
uv run python scripts/export_pdf.py # 默认 1em = 24px，输出 封面demo.pdf
uv run python scripts/export_pdf.py --em 16 -o 封面demo-16.pdf
脚本优先调用本机 Edge / Chrome；若都未安装，可先下载 Playwright Chromium：
uv run playwright install chromium
导出页为黑底满幅，画面距上、下、左、右边界各 1em；脚本会在导出前校验该边距。默认 --em 24 时输出 720 × 1104px（约 190 × 292 mm）。
调整指南
构图（assets/js/scene.js）
| 数据 | 含义 |
|---|---|
clouds |
云：三行 3/5/3 的云形，x/y 为最宽一行的左上角 |
sun |
落日：逐行圆形切片，数组顺序对应顶部的红到底部的黄 |
birds |
飞鸟：每只占 2 格（麻雀 / 喜鹊 / 乌鸦） |
antennas |
天线：单列「线」，从 y 向下叠 h 格 |
buildings |
楼群：x/y/w/h，n 对应 .bld-n |
TITLE |
标题文案、起始行、行高、左右留格数 |
坐标为 0–27 列、0–43 行；越界会直接抛错提示。
样式（assets/css/style.css）
- 整体字号：
.scene的font-size，所有元素统一继承。 - 背景「天」：
.sky。 - 云：
.cloud的明度与.cloud-*的色相。 - 落日：
.sun的整体明度（当前为原色 90%），.sun-t1至.sun-t17为逐行色阶。 - 飞鸟：
.bird-sparrow、.bird-magpie、.bird-crow。 - 天线：
.ant（深色款为.ant-dark）。 - 楼群：
.bld与.bld-1至.bld-8。 - 标题：
.title-panel（黑色矩形）与.title-panel .title（白色文字及字号）。
实现说明
scene.js先建立 28×44 网格并全部填「天」，再按数组覆盖元素；同 class 的连续字符合并为单个span输出。- 标题区把对应格子清空，并在同一位置叠放绝对定位的黑色面板；边缘与字符整格对齐，不会出现半个字。
- Zpix 单字步进为 13/12 em，因此
.line使用letter-spacing: -0.083333em补偿，保证 28 列恰好落在 28em 宽内。
字体许可
assets/fonts/zpix.ttf 为第三方 Zpix 像素字体，版权归原作者所有；使用或分发前请遵循其原始许可说明。