研究报告排版规范 v3.0
基于 EDIC Design System 的 A4 印刷排版体系。HTML + 共享 styles.css,无第三方依赖,Ctrl+P 即出 PDF。
目录
规范总览:设计目标与核心理念
本规范定义了一套基于 A4 国际标准纸张的印刷排版体系。其核心目标是:让 AI Agent 或内容创作者通过替换文本内容,生成结构一致、便于打印的 PDF 报告文件。
本规范是 EDIC Design System(参见 index.html)在印刷媒介上的延伸。设计系统中的色彩令牌(OKLch 橄榄绿)、字体体系(衬线 Display + 无衬线 Body)、间距比例尺(4pt 栅格)被完整继承并适配为印刷环境下的 pt 单位。
核心理念
1. 轻依赖。 单个 HTML 文件配合共享的 styles.css(设计令牌 / 布局 / 组件样式)。无需 JavaScript 框架、无需字体 CDN。复制即用。
2. 印刷优先。 所有尺寸以 pt(点)为单位,而非 px 或 rem。CSS @page 规则直接控制纸张边距、运行页眉、页码。打印时 print-color-adjust: exact 确保色块保留。
3. 代理友好。 全文以 ✎ 标记 标注待填充位置。AI Agent 可搜索 ✎ 定位内容缺口;头部注释块包含使用说明,可作为 Agent 操作参考。
4. 可扩展。 基于 CSS 自定义属性体系,替换 :root 中的令牌即可全局换肤。色彩、字体、间距、字号均可独立覆盖。
降维研究方法论
EDIC 降维研究方法论的核心思想:将复杂的设计决策「降维」为可复用的系统参数。一个行业分析报告涉及数百个排版决策(字体、字号、间距、色彩、对齐方式……),通过设计系统的「预决策」,内容生产者只需要关注内容本身,而非排版细节。本规范正是这一方法论在印刷领域的实践——把 A4 排版的全部复杂性封装进 1500 余行 CSS 中。
A4 页面框架
版心 · 栅格 · 边距策略
A4 国际标准纸张尺寸为 210mm × 297mm。本规范通过精算边距,在保证阅读舒适度的前提下最大化内容面积。
| 参数 | 值 | 说明 |
|---|---|---|
| 纸张 | 210mm × 297mm | A4 国际标准 |
| 天头 (top) | 18mm | 容纳 running header + 编委会行 |
| 地脚 (bottom) | 22mm | 容纳页码 (8pt 字号约 4mm) |
| 内边距 (left) | 16mm | 足够装订,不浪费横向空间 |
| 外边距 (right) | 16mm | 对称布局 |
| 版心 | 178mm × 257mm | 面积利用率 ≈ 79% |
版心利用策略
178mm 的内容宽度在 10pt 字号下,每行约容纳 70–75 个汉字字符(或 85–95 个拉丁字符),属于印刷排版的最佳行长范围(《字体排印原理》推荐行长 60–75 字符)。
257mm 的内容高度在全正文排版下约容纳 48–52 行文字(含段落间距),对应 4–6 个段落块或 2–3 个带标题的内容节段。
分页控制规则
本规范采用 智能自然分页 策略——不强制每章从新页开始,而是由浏览器根据页面剩余空间填充,仅在结构性边界处强制分页。配合脚本中的分页控制,在打印前调整内容量,目标是减少不必要的大段留白。
| 规则 | CSS / JS | 效果 |
|---|---|---|
| 结构性强制分页 | @media print { .rp-cover, .rp-toc, .rp-references, .rp-footer } |
封面→目录→正文→附录→页脚的逻辑边界处强制分页 |
| 自然填充 (章节之间不强制分页) |
.rp-section { /* no page-break-before */ } |
浏览器自动填充页面,减少底部留白;短章节自动合并到同一页 |
| 智能分页引擎 | JavaScript beforeprint |
打印前评估各章节内容量(文本行数 + 块元素折算),贪心打包填充,目标利用率 ≥ 70% |
| 标题防孤 | h1–h5 { page-break-after: avoid } |
标题不会出现在页面最后一行 |
| 组件防跨 | .rp-callout { page-break-inside: avoid } |
callout、图表等组件整体跨页不切断 |
| 表格跨页 | thead { display: table-header-group } |
长表格跨页时自动重复表头 |
| 孤行控制 | body { orphans: 3; widows: 3 } |
防止段首/段尾出现孤立行 |
运行页眉与页码
页眉通过 CSS position: running() 注入 @page 的 @top-left 区域。封面页(@page cover-page)禁用所有页眉页脚页码。目录页(@page toc-page)页眉显示「目录」。
页码使用等宽字体 + 8pt + muted 色,位于页面底边居中。封面无页码,目录页从罗马数字或阿拉伯数字开始(当前实现从 1 开始,封面和目录不计入页码序列——印刷厂通常在此追加处理)。
设计决策说明
为何不选用更宽的 20mm 边距?以 A4 阅读器的典型阅读距离(30–40cm)计算,10pt 字号的视角约为 0.35°,属于最佳可读区间。过宽的边距会减少每行字数,导致换行过于频繁;过窄的边距则会增加每行长度,超出读者头部转动的舒适范围。16mm 是我们在这个平衡点上得到的最优解。
字体系统与印刷排版
继承自 EDIC Design System 的四字族体系,适配印刷环境的 pt 单位:
| 角色 | 字族 | 用途 |
|---|---|---|
| Display | "Iowan Old Style", "Charter", Georgia, "Noto Serif SC", "Source Han Serif SC", serif |
标题 (H1–H3)、块引用、KPI 数字 |
| Body | "Noto Sans SC", "Source Han Sans SC", -apple-system, "Segoe UI", system-ui, sans-serif |
正文、标注、注释 |
| Mono | "JetBrains Mono", "IBM Plex Mono", "Noto Sans Mono SC", ui-monospace, monospace |
数据、代码、章节编号、页眉页码 |
| UI | "Noto Sans SC", -apple-system, "Segoe UI", system-ui, sans-serif |
运行页眉、页脚信息 |
字号比例尺
字号采用 Major Third (1.25) 模度比例,以 10pt 正文为基准:
| Token | 字号 | 行高 | 比例 | 使用场景 |
|---|---|---|---|---|
--text-caption | 7.5pt | — | 0.75× | 图表标注、表格脚注、Badge |
--text-footnote | 8pt | — | 0.80× | 页脚、参考文献 |
--text-body-sm | 9pt | 1.4 | 0.90× | 表格内容、图注、引用来源 |
--text-body | 10pt | 1.6 | 1× | 正文(基准) |
--text-body-lg | 11pt | 1.6 | 1.10× | 首段引文 |
--text-h5 | 12pt | 1.25 | 1.20× | 段落标题、标注标题 |
--text-h4 | 15pt | 1.25 | 1.50× | 块引用、Callout 标题 |
--text-h3 | 18pt | 1.12 | 1.80× | 三级标题 |
--text-h2 | 22pt | 1.12 | 2.20× | 二级标题 |
--text-h1 | 28pt | 1.12 | 2.80× | 章标题 |
--text-display | 36pt | 1.12 | 3.60× | 封面主标题 |
排版规则汇总
| # | 规则 | 实现方式 |
|---|---|---|
| 1 | 正文两端对齐 | text-align: justify; text-justify: inter-ideograph |
| 2 | 悬挂标点(中文排版) | hanging-punctuation: first allow-end last |
| 3 | 段落间距 = 12pt (3 网格单位) | p { margin-bottom: var(--space-3) } |
| 4 | 段首无缩进(留间距) | 默认 0 缩进,间距代替 |
| 5 | 数字 / 数据使用 tabular-nums | font-variant-numeric: tabular-nums |
| 6 | 标题与后续内容紧密 | page-break-after: avoid |
| 7 | 列表缩进 20pt (5 网格单位) | ul, ol { margin-left: var(--space-5) } |
| 8 | 强调色只出现两次/页 | 设计原则,无 CSS 强制 |
字体渲染说明
本规范推荐的字体栈在 macOS (Iowan Old Style / SF Pro / JetBrains Mono) 和 Windows (Georgia / Segoe UI / Noto Sans SC) 上均有良好回退。中文内容优先使用 Noto Sans SC(Google 思源黑体)和 Noto Serif SC(Google 思源宋体),两者均为开源字体,可在 Google Fonts 获取。
如系统未安装上述字体,浏览器会按 CSS font-family 列表依次回退,最终降级到系统 serif/sans-serif/monospace。对于需要精确控制字体的印刷场景,建议在 PDF 生成前嵌入字体文件(Chrome 打印支持 TrueType/OpenType 嵌入)。
注意事项
JetBrains Mono 的 font-variant-numeric: tabular-nums 是默认启用的特性,但其他等宽字体可能需要显式声明。如使用 Noto Sans Mono SC,建议测试数字列的对齐效果。
表格规范
表格是研究报告中最核心的数据呈现方式。本规范定义了三种表格变体:标准表格(默认)、紧凑表格(-compact)和条纹表格(-striped)。
标准表格 — 设计原则
| 设计维度 | 取值 | 设计理由 |
|---|---|---|
| 表头衬底 | 无背景色,仅底部 1.5pt accent 线 | 印刷品中色块影响可读性;靠线的粗细区分表头/表体 |
| 表头字族 | font-mono · uppercase · tracking-wider |
等宽字体的视觉整齐感 + uppercase 让表头从内容中跳出 |
| 行分割线 | 0.5pt 细线(var(--rule)) |
足够引导视线,不过度干扰 |
| 行高 | --space-2 (8pt) 上下内边距 |
A4 阅读距离下 8pt ≈ 2.8mm,足够区分行距 |
| 数字列 | 右对齐 · tabular-nums · mono |
数字右对齐方便比较大小;等宽保证对齐 |
| 尾行底线 | 0.75pt(略粗于行线) | 视觉上标记表格结束 |
使用示例
标准表格(彩色格式采纳率对比)
| 色彩格式 | 2024 | 2025 | 2026 | 趋势 |
|---|---|---|---|---|
| HEX | 88% | 82% | 71% | ↓ 19% |
| HSL | 48% | 45% | 42% | ↓ 13% |
| OKLch | 5% | 12% | 38% | ↑ 660% |
| RGB | 32% | 28% | 24% | ↓ 25% |
紧凑表格(数据密集场景)
添加 class="-compact" 可获得紧凑版:
| 指标 | 2024 Q4 | 2025 Q4 | YoY |
|---|---|---|---|
| 营收(百万) | ¥12.4 | ¥15.8 | +27.4% |
| MAU(百万) | 3.2 | 4.1 | +28.1% |
| NRR | 112% | 118% | +6pp |
| Churn | 4.8% | 3.9% | −0.9pp |
条纹表格(用于更长的数据列)
添加 class="-striped":
| 年 | 设计系统率 | OKLch 采用率 | Penpot 采用率 | AI 辅助率 |
|---|---|---|---|---|
| 2023 | 42% | — | 8% | — |
| 2024 | 56% | 5% | 15% | 12% |
| 2025 | 62% | 12% | 22% | 28% |
| 2026 | 68% | 38% | 34% | 43% |
表格规范总结
所有表格类名体系:
.rp-table— 基础表格(默认标准样式).rp-table.-compact— 紧凑版(缩小 padding + 字号).rp-table.-striped— 斑马条纹版(仅用于超长表格).rp-num— 数字列(右对齐 + tabular-nums + mono).rp-table-wrap— 表格容器(控制外边距 + 防跨页).rp-table-wrap.wide— 宽表格容器(负 margin 扩展)
图表与数据可视化
所有图表组件使用纯 CSS 实现,零 JavaScript 依赖。支持三种图表类型:条形图、环形图和KPI 卡片。图表网格默认为双列布局。
条形图 — 设计与使用
环形图 — 设计与使用
通过 conic-gradient() 绘制。中心镂空显示主值。配合图例使用。
KPI 卡片网格
默认 4 列布局。使用 CSS grid 可自定义列数;默认四列已封装为 .rp-kpi-grid。
图表组件的 CSS 类体系
| 组件 | 容器类 | 子元素类 | 自定义方式 |
|---|---|---|---|
| 条形图 | .rp-bar-group |
.rp-bar-row / .rp-bar-label / .rp-bar-track / .rp-bar-fill |
class="rp-bar-fill--wNN" 控制填充比例 |
| 环形图 | .rp-donut |
.rp-donut-ring / .rp-donut-center / .rp-donut-legend |
class="rp-donut-ring--penpot" 示例分布 |
| KPI 卡片 | .rp-kpi-grid |
.rp-kpi / .rp-kpi-num / .rp-kpi-label / .rp-kpi-desc |
默认四列;可按需扩展 CSS grid |
| 图表网格 | .rp-chart-grid |
.rp-chart / .rp-chart-title |
默认双列;用 CSS grid 可覆盖 |
信息组件
Callout · Figure · Badge · Blockquote
信息组件用于在正文中嵌入强调性内容。所有组件均已设置 page-break-inside: avoid,确保不会跨页断裂。
Callout(提示框)
四种语义变体,通过类名切换:
默认提示
左侧 3pt 橄榄绿色竖线 + 浅橄榄绿背景。用于一般性强调。
信息提示 INFO
蓝色强调线。用于补充说明、背景信息。
成功提示 SUCCESS
绿色强调线。用于正面发现、增长数据。
注意提示 WARNING
黄色强调线。用于风险提醒、注意事项。
警示提示 ERROR
红色强调线。用于负面发现、严重警告。
Figure(插图)
图片容器,默认 16:9 比例。可替换为实际图片。
图 1 · 设计系统建设方式分布(2026 年调查数据,N=127)
Blockquote(块引用)
"设计系统不是项目,它是产品——服务于其他产品的产品。" Nathan Curtis,Design Systems 作者
引用块使用衬线 display 字体 + 15pt 字号 + 左侧 3pt 强调竖线。引用来源(cite)在引用文下方,带破折号前缀。
Badge(标签)
行内标签,用于状态标记。五种颜色 + 描边共六种变体:
ACCENT SUCCESS WARNING ERROR INFO OUTLINE DESIGN
封面与目录设计规范
封面和目录是报告的第一印象。本规范在印刷约束下提供了足够的设计自由度。
封面规则
封面使用 @page cover-page 禁用所有页眉页脚页码。内容通过 padding 从版心底部向上构建,形成「由下而上」的视觉流:
- Tag — 等宽字体 + uppercase + 宽字距 + accent 色,位于顶部
- H1 — 36pt 衬线 display,最大宽度 150mm,限制行长
- 副标题 — 15pt 正文粗度 300,最大宽度 120mm
- 元数据行 — 等宽字体,项目间以中点隔开
- 装饰条 —
::after伪元素,60pt × 3pt 橄榄绿色块
封面内容垂直居下而非居中的原因:A4 纵向纸张的视觉重心在水平中线偏上,将内容放在下方可以制造「稳定感」和「庄重感」,这是行业分析报告所需要的情绪基调。
目录规则
目录页使用 @page toc-page 设置页眉显示「目录」。目录条目采用点状底线连接章节名称(如含页码)。二级目录(子条目)缩进显示。
| 元素 | 样式 | 说明 |
|---|---|---|
| 章节编号 | .rp-toc-num | mono + accent + 700weight + 28pt 最小宽度 |
| 章节名 | a 标签 | 正文大小,flex: 1 占据剩余宽度 |
| 条目分割线 | border-bottom: 0.5pt dotted var(--rule-light) | 点状线既区分条目又不干扰视线 |
| 子条目 | .rp-toc-sub | 缩进 + muted 色 + 无分割线 |
模板使用指南(Agent 指令)
本模板面向 AI Agent 辅助填充设计。以下是指令规范,Agent 可按以下流程操作:
Agent 执行流程
Step 1 搜索 ✎ 定位所有待填充位置。
Step 2 按需替换 <title>,#running-header-left 和 #running-header-right。
Step 3 填写封面:分类标签、标题、副标题、机构/日期/版本/许可。
Step 4 更新目录 #toc 中的 li 条目,匹配实际章节。
Step 5 为每个 .rp-section 填充内容。使用 .rp-body 包裹正文段落。
Step 6 插入 KPI / 图表 / 表格 / Callout 等数据组件。
Step 7 可选:替换 :root 中的设计令牌以匹配品牌色。
Step 8 保存,在浏览器中预览,Ctrl+P → 另存 PDF。
内容结构规则
| HTML 结构 | CSS 类 | 用途 | 分页行为 |
|---|---|---|---|
<section class="rp-cover"> | rp-cover | 封面页 | 打印时 page-break-after: always |
<section class="rp-toc"> | rp-toc | 目录页 | 打印时 page-break-after: always |
<section class="rp-section"> | rp-section | 每章内容 | 自然分页,无强制断点 智能算法动态评估 |
<div class="rp-body"> | rp-body | 正文段落容器 | 自动流动 |
<div class="rp-kpi-grid"> | rp-kpi-grid | KPI 卡片行 | 打印时 page-break-inside: avoid |
<div class="rp-chart-grid"> | rp-chart-grid | 图表网格行 | 打印时 page-break-inside: avoid |
<div class="rp-table-wrap"> | rp-table-wrap | 表格容器 | 打印时 page-break-inside: avoid |
<div class="rp-callout"> | rp-callout [-info/-warning/-error/-success] | 强调提示框 | 打印时 page-break-inside: avoid |
<div class="rp-figure"> | rp-figure | 图片容器 | 打印时 page-break-inside: avoid |
<footer class="rp-footer"> | rp-footer | 封底页 | 打印时 page-break-before: always |
调色板定制
如需更换品牌色,仅需修改 :root 中以下变量:
| 变量 | 默认值 | 说明 |
|---|---|---|
--accent | var(--ds-accent) | 橄榄绿 · 主要强调色 |
--accent-soft | oklch(72% 0.05 115) | 浅橄榄 · 次要强调色 |
--accent-bg | oklch(90% 0.025 115) | 底色版本 |
--font-display | Iowan Old Style / Noto Serif SC | 标题字族 |
--font-body | Noto Sans SC | 正文字族 |
例如,替换为暖橙色品牌:
--accent: oklch(58% 0.16 35);
--accent-soft: oklch(78% 0.08 35);
--accent-bg: oklch(92% 0.025 35);
⚠️ 注意事项
更换强调色时,请保持 OKLch 色彩空间。HEX/RGB 转 OKLch 可使用 oklch.com 在线转换。修改后请检查。
修改字体栈时,确保系统字体回退链完整。中文环境推荐保留 Noto Sans/Serif SC 作为中文字体回退。
附录:参考资料
以下为本规范引用的外部参考资料,均为真实可靠的行业资源:
设计系统与色彩
- [1] OKLch Color Space — CSS Color Level 4. W3C 规范。定义 OKLch 色彩空间在 CSS 中的使用方式。
https://www.w3.org/TR/css-color-4/#oklch - [2] Design Tokens W3C Community Group. 设计令牌标准化工作组。定义 Design Tokens 格式规范。
https://www.w3.org/community/design-tokens/ - [3] Design Tokens Format Specification. Design Tokens Community Group 发布的格式标准。
https://design-tokens.github.io/community-group/format/ - [4] OKLch Color Picker & Converter. 在线 OKLch 颜色工具。HEX/RGB/HSL ↔ OKLch 互转。
https://oklch.com/ - [5] Eva Design System — Color Generator. 基于 OKLch 的设计系统色彩生成工具。
https://colors.eva.design/
排版与字体
- [6] Noto Sans SC (Google 思源黑体). Google 推出的开源中文无衬线字体。
https://fonts.google.com/noto/specimen/Noto+Sans+SC - [7] Noto Serif SC (Google 思源宋体). Google 推出的开源中文衬线字体。
https://fonts.google.com/noto/specimen/Noto+Serif+SC - [8] JetBrains Mono. 专为开发者设计的开源等宽字体,支持 tabular-nums。
https://www.jetbrains.com/lp/mono/ - [9] Iowan Old Style. Apple 系统字体,基于早期美国印刷字体的数字复刻。
https://developer.apple.com/fonts/system-fonts/ - [10] Modular Scale — Typographic Scale Calculator. 排版模度比例计算工具。
https://www.modularscale.com/
A4 印刷与 CSS 打印
- [11] ISO 216 — A4 国际标准纸张尺寸. ISO 216 定义 A 系列纸张尺寸标准。
https://www.iso.org/standard/36631.html - [12] CSS Paged Media Module Level 3. W3C 规范。定义
@page规则、分页媒体、命名页面等。
https://www.w3.org/TR/css-page-3/ - [13] CSS Generated Content for Paged Media Module. W3C 工作草案。定义 running elements 等功能。
https://www.w3.org/TR/css-gcpm-3/ - [14] MDN: CSS print-color-adjust. 控制浏览器在打印时是否保留颜色和背景。
https://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust - [15] paged.js — 基于 Web 的 PDF 生成工具. 开源工具,将 HTML/CSS 转换为分页 PDF。
https://pagedjs.org/
设计系统与案例
- [16] EDIC Design System — 本设计系统的视觉手册与组件库。
index.html(同仓库内) - [17] Ant Design 设计系统. 阿里巴巴出品的企业级 UI 设计语言。
https://ant.design/ - [18] Penpot — 开源设计工具. 基于 Web 的跨平台设计工具,支持 SVG 原生编辑。
https://penpot.app/ - [19] Design Systems Database. 由 Adele 维护的设计系统索引,收录 150+ 设计系统案例。
https://designsystems.surf/
引用建议:使用本规范生成的报告,建议在封底或脚注注明「基于 EDIC 降维研究报告规范 v3.0」。