---
name: xhs-html-renderer
description: 小红书内页 HTML/CSS 渲染方案 — Playwright + Noto Sans CJK + 底板做 CSS 背景。Pillow 方案已废弃。
---

# 小红书内页 HTML/CSS 渲染方案

## 触发条件

- 生成小红书选题的内页图片
- 任何需要中文排版精致的图文场景
- 用户对 Pillow 渲染质量不满意时，切换到此方案

## 技术栈

```
封面：Pillow（固定模板叠加文字，不改动）
内页：HTML/CSS 排版 → Playwright Chromium 截图
      底板 内页.png 作为 CSS background-image (base64)
      一次截图出最终 PNG，不二次合成
```

## 为什么不用 Pillow / WeasyPrint / wkhtmltoimage

| 方案 | 问题 |
|------|------|
| Pillow | 中文 textbbox 不准确，行高/字距无法精确控制，排版机械呆板 |
| WeasyPrint | 中文文字被截断（最后 2-3 字消失），@page 尺寸不可靠 |
| wkhtmltoimage | 根本不渲染中文字符（QtWebKit 字体系统问题） |
| Playwright+Chromium | ✅ 浏览器级排版，CSS flexbox/grid/line-height 全部可用 |

## 字体

| 用途 | 字体 | 路径 | 注意 |
|------|------|------|------|
| 正文 | Noto Sans CJK SC Bold | `/usr/share/fonts/opentype/noto/NotoSansCJK-Bold.ttc` | 文泉驿正黑 Regular 太细，不可用 |
| 页面标题 | 优设标题黑 | `~/project/brand/YouSheBiaoTiHei-2.ttf` | 仅标题用 |
| 封面文字 | 同上 | 同上 | 封面仍用 Pillow |

安装：`sudo apt-get install fonts-noto-cjk`

## 字号体系（v8 最终版）

用户反馈「默认正文字号太小，字重又轻」后确定：

| 层级 | 字号 | 字重 | 用途 |
|------|------|------|------|
| Hero | 172px | bold | 每页核心数字（如 91%），5 秒内抓住眼球 |
| H1 | 54px | bold | 页面标题 |
| H2 | 32px | bold | 区域小标题、结论条 |
| Body | 28px | bold | 正文、表格、说明——**不低于此** |
| Caption | 22px | regular | 页码、脚注 |

底线：正文 < 28px 用户看不清。

## 色彩规则

- 深绿 `#285A37`：品牌条、标题、关键数字
- 橙色 `#E67E22`：**仅标记每页最核心的 1-2 个信息点**。不得用于装饰。
- 近黑 `#1E3C28`：正文
- 中绿 `#649B73`：辅助说明、分隔线、次要文字

橙色使用铁律：如果问「为什么这块用橙色」，必须能说「因为它是本页最重要的信息」。不能答「因为好看」。

## 布局原则（v8 迭代确认）

1. **底板是纸张，不是画布**：内页.png 做 CSS `background-image`，内容浮于纸上。去掉大面积不透明背景色，多用边框和间距区分层级。
2. **每页一个视觉焦点**：一个大数字或一个醒目元素，5 秒能抓住
3. **视觉路径**：Hero → 标题 → 支撑数据 → 细节 → 结论，自上而下
4. **内容充实**：每页至少 6-8 个数据点，不只是好看
5. **少用色块**：用边框（border）代替背景色（background），让底板纸纹透出来

## 多页渲染技巧

四页并排渲染为 4968×1660 的横图，一次 Playwright 截图，PIL 切分为 4 张：

```python
page = browser.new_page(viewport={"width": 4968, "height": 1660})
page.goto(f"file://{html_path}")
page.screenshot(path=output_path)
# PIL crop: x = i * 1242 for i in range(4)
```

## 文案质量标准

小红书文案 5 维评分（≥7/10 发布）：

| 维度 | 满分标准 |
|------|---------|
| 数据具体性 | 引用具体专业名+学校名+分数+数量 |
| 可操作性 | 读者看完知道具体怎么做（网址、费用、步骤） |
| 独特洞察 | 反直觉发现、独家数据角度 |
| 事实可信度 | 所有数字可追溯到 CSV 或官方来源 |
| 信息密度 | 每 100 字至少 3 个独立数据点 |

## 依赖

- `fonts-noto-cjk` (apt)
- Playwright (Chromium 1187 已缓存于 `~/.cache/ms-playwright/`)
- Pillow (封面渲染)
- we-mp-rss venv (`~/project/we-mp-rss-main/venv/`)

## 参考文件

- `references/v8-script.py` — 完整可运行的 v8 渲染脚本
- `references/design-spec.md` — 排版设计规范详细版