rogerwang2008
319ba1890a
- 新增 page3.html：无「天」背景的演职员表与火山场景 - 重构为页面专属 CSS/JS 与共用的 text-scene 渲染引擎 - PDF 导出支持 --page 参数
124 lines
5.3 KiB
Markdown
124 lines
5.3 KiB
Markdown
# 《关于「甲子」的虚构故事》公众号推送 Demo
|
||
|
||
一个 28 列 × 44 行的汉字文字画 Demo。黑底、每格一个汉字，空白处由淡色「天」铺满；画面包含晚霞云、落日、飞鸟、天线与城市楼群，上方以整格扣出的黑色标题框居中呈现「关于「甲子」的虚构故事」。
|
||
|
||
项目规划为三张类似页面，当前实现第 1 页（`page1.html`）与第 3 页（`page3.html`）。
|
||
|
||
## 效果概述
|
||
|
||
- 28 列 × 44 行，严格按字符网格排布，全页文字统一字号。
|
||
- 空白格自动填充淡色「天」，形成低对比背景纹理。
|
||
- 元素按层绘制：云 → 落日 → 飞鸟 → 天线 → 楼群。楼群最后绘制，保证太阳在无楼处仍保留完整圆弧。
|
||
- 标题区域按整格对齐扣空，并叠放黑色面板，居中显示白色标题。
|
||
- 使用 Zpix 像素字体；正文行通过负字距补偿，把单字步进压回 1em。
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
.
|
||
├─ page1.html # 第 1 页入口
|
||
├─ page3.html # 第 3 页入口
|
||
├─ pyproject.toml # uv 环境与导出依赖
|
||
├─ uv.lock # 依赖锁定
|
||
├─ scripts/export_pdf.py # PDF 导出脚本
|
||
├─ assets/
|
||
│ ├─ css/
|
||
│ │ ├─ common.css # 三页共用：字体、骨架、网格、标题框
|
||
│ │ ├─ page1.css # 第 1 页配色
|
||
│ │ └─ page3.css # 第 3 页配色与前景标题
|
||
│ ├─ js/
|
||
│ │ ├─ text-scene.js # 共享文字画渲染引擎
|
||
│ │ ├─ page1.js # 第 1 页场景数据
|
||
│ │ └─ page3.js # 第 3 页场景数据
|
||
│ └─ fonts/zpix.ttf # Zpix 像素字体
|
||
└─ references/a.html # 原始参考页
|
||
```
|
||
|
||
## 运行
|
||
|
||
直接打开 `page1.html` 即可。若需通过本地服务器预览：
|
||
|
||
```bash
|
||
python -m http.server 8000
|
||
# 第 1 页 http://localhost:8000/page1.html
|
||
# 第 3 页 http://localhost:8000/page3.html
|
||
```
|
||
|
||
## 多页结构
|
||
|
||
现有页面：
|
||
|
||
- `page1.html`：完整日落城市文字画，空白处铺淡色「天」。
|
||
- `page3.html`：无「天」背景的演职员表；前景标题「演职员表」，背景为电线、麻雀、枪、草、消防栓与下半屏火山。
|
||
|
||
共用与专属：
|
||
|
||
- `common.css`、`text-scene.js`：三页共用的页面骨架、网格、标题框与渲染引擎。
|
||
- `pageN.html`、`pageN.css`、`pageN.js`：每一页的入口、配色与场景数据。
|
||
|
||
新增页面时复制 `page1.*` 三件套，修改 `pageN.js` 中的数据与 `pageN.css` 配色，并按顺序引入 `common.css`、`pageN.css`、`text-scene.js`、`pageN.js`。
|
||
|
||
## 导出 PDF
|
||
|
||
使用 Playwright（由 uv 管理）导出，页面尺寸为 30em × 46em：28 × 44 格的画面，四周各留恰好 1em。
|
||
|
||
```bash
|
||
uv sync
|
||
uv run python scripts/export_pdf.py # 默认导出 page1.html 到 dist/封面demo.pdf
|
||
uv run python scripts/export_pdf.py --page page3.html -o dist/page3.pdf
|
||
uv run python scripts/export_pdf.py --em 16 -o dist/封面demo-16.pdf
|
||
```
|
||
|
||
脚本优先调用本机 Edge / Chrome；若都未安装，可先下载 Playwright Chromium：
|
||
|
||
```bash
|
||
uv run playwright install chromium
|
||
```
|
||
|
||
导出页为黑底满幅，画面距上、下、左、右边界各 1em；脚本会在导出前校验该边距。默认 `--em 24` 时输出 720 × 1104 px（约 190 × 292 mm）。
|
||
|
||
## 调整指南
|
||
|
||
### 构图（assets/js/page1.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/common.css`）：
|
||
|
||
- 整体字号：`.scene` 的 `font-size`，所有元素统一继承。
|
||
- 标题：`.title-panel`（黑色矩形）与 `.title-panel .title`（文字样式）。
|
||
|
||
页面样式（`assets/css/page1.css`）：
|
||
|
||
- 背景「天」：`.sky`。
|
||
- 云：`.cloud` 的明度与 `.cloud-*` 的色相。
|
||
- 落日：`.sun` 的整体明度（当前为原色 80%），`.sun-t1` 至 `.sun-t17` 为逐行色阶。
|
||
- 飞鸟：`.bird-sparrow`、`.bird-magpie`、`.bird-crow`。
|
||
- 天线：`.ant`（深色款为 `.ant-dark`）。
|
||
- 楼群：`.bld` 与 `.bld-1` 至 `.bld-8`。
|
||
|
||
### 第 3 页（assets/js/page3.js）
|
||
|
||
通过 `glyphs` 数组放置任意背景字：`{ text, x, y, cls, vertical }`，坐标仍按格对齐。前景标题 `.credits` 由页面脚本追加，可在 `page3.css` 中调整字号与位置。
|
||
|
||
## 实现说明
|
||
|
||
- `text-scene.js` 先建立 28×44 网格并全部填「天」，再按页面数据覆盖元素；同 class 的连续字符合并为单个 `span` 输出。
|
||
- 标题区把对应格子清空，并在同一位置叠放绝对定位的黑色面板；边缘与字符整格对齐，不会出现半个字。
|
||
- Zpix 单字步进为 13/12 em，因此 `.line` 使用 `letter-spacing: -0.083333em` 补偿，保证 28 列恰好落在 28em 宽内。
|
||
|
||
## 字体许可
|
||
|
||
`assets/fonts/zpix.ttf` 为第三方 Zpix 像素字体，版权归原作者所有；使用或分发前请遵循其原始许可说明。
|