Layout Grammar
视觉判断
页面只做一件事：让眼睛先沿黑色原文读，再在遇到阻力时看身边的彩色注，读完整章后自然落到蓝色解读。
页面骨架
书名
章节
章节意旨图（可选；横向、无字、低干扰）
原文 + 青色字词注 + 朱色句义注 + 赭色异文注
原文 + 彩色夹注
...
章节解读
蓝色自然段
蓝色自然段
来源- 画布：
1080 × auto，暖白或纯白底。 - 左右安全区：72–92px；顶部 72–96px；底部 64–88px。
- 书名与章节居中，正文左对齐。
- 一张图承载完整章节；高度随内容增加，不压缩成海报。
字体层级
| 层 | 建议字号 | 字体 | 颜色 |
|---|---|---|---|
| 书名 | 54–68px | Songti SC / STSong |
墨黑 |
| 章节 | 48–62px | Songti SC / STSong |
墨黑 |
| 原文 | 42–52px | Songti SC / STSong |
#171512 |
| 拼音 | 18–22px | 系统无衬线 | #52615e |
| 字词注 | 22–28px | 系统无衬线 | #27988a |
| 句义注 | 22–28px | 系统无衬线 | #d84a42 |
| 异文注 | 22–28px | 系统无衬线 | #b7790b |
| 章节解读标题 | 28–32px | 系统无衬线 | #795f43 |
| 章节解读正文 | 26–30px | Songti SC / STSong |
#39342e |
| 来源 | 18–22px | 系统无衬线 | #77716a |
原文行高 1.8–2.05；章节解读行高 1.75–1.95。字号宁可稳，不用夸张标题挤压正文。
夹注关系
- 原文 token 与其注解组成不可拆单元；允许单元之间换行，不允许括号与注解正文分家。
- 逗号、句号、问号、叹号和闭引号跟随前一原文 token；段首引号跟随后一 token，不能单独换行。
- 彩注比原文小约 45%，贴近原文基线或略抬高，不能像脚注一样远离对象。
- 拼音只浮在对应原文上方。
- 原文可用细点线提示被注位置，但下划线不应比文字更抢眼。
- 同一注解只用一种语义色。蓝色不进入夹注区。
章节解读区
- 用 52–72px 留白与原文分开，再铺一层极浅暖灰褐底（建议
#eee8dc附近）；不使用纯白底上的彩色长正文。 - 正文使用接近墨色的暖黑（建议
#39342e），标题只用低饱和茶褐色；蓝色不进入章节解读区。 - 解读区可有细边线，但不用圆角卡片、投影或悬浮效果。它应像同一张纸的另一层墨，而不是嵌入的网页组件。
- 标题只写「章节解读」，不添加营销副标题。
- 第一段略深、略大且不缩进，承担全章判断；后续自然段首行缩进两字，行高 1.9–2.0，段距小于原文区的模块间距。
- 迁移与边界自然写进文章，不另加「解读边界」「应用」「迁移」「局限」等方法标签。
顶部意旨图
- 位置固定在章节标题与原文之间；先定气息，再进入文字。
- 推荐横向 3:2，宽度占正文安全区 100%，画面自身保留安全边缘；不得让浏览器随意裁掉主体。
- 使用暖象牙、烟灰、茶褐和极少朱砂；低饱和、低对比、大留白。图像滤镜只能轻微降饱和与对比，不能把失真的图救成合格图。
- 图内不得出现任何文字、书法、标题、印章、水印或装饰边框。
- 主体要小，母题要清楚。配图的视觉重量低于章节标题和第一行原文，不能把长图变成插画海报。
- 底部用极浅渐隐或留白接回纸面，避免硬切成另一张图。
禁止项
- 米黄色仿古纹理、卷轴边框、印章、祥云等装饰不得挤占阅读面积。
- 除顶部配图接回纸面的极浅渐隐外，不用装饰性渐变、阴影、玻璃卡片、荧光笔大色块。
- 不把长注塞进原文中间造成“彩色正文”。
- 不让书名、章节、来源缺席。
- 不靠浏览器视口高度裁图；必须按完整文档高度截图。
视觉验收
整图回答层级，中段回答可读性，底部回答完整性。长图必须看覆盖全高的重叠切片；只看缩略整图会漏掉局部遮挡、断行和裁切。