文章排版系统 是做什么的？
目的
文章排版系统提供了一种方法，用于设计“阅读体验”——即博客、文档、白皮书和案例研究等长文内容的文本及辅助媒体的特定排列方式。虽然 section-composition-system 负责处理页面级别的流程，但此系统专注于可读性、行长（度量）、垂直节奏以及文本与编辑元素（图片、引用、代码块）之间的空间关系。它确保用户能够在不产生视觉疲劳的情况下消耗大量信息。
用例
- 设计博客文章模板和文章页面。
- 构建技术文档和知识库。
- 创建长篇编辑内容或数字杂志。
- 开发“阅读模式”或注重可访问性的文本视图。
- 组织以信息留存为目标的教育内容。
何时不使用
- 高影响力的着陆页： 目标是快速扫描优点和快速行动号召；改用
section-composition-system。 - 仪表盘： 优先考虑数据密度和对比，而非线性阅读；改用
data-table-ui-system。 - 表单和输入密集型视图： 使用
form-design-system。 - 单视口“应用”视图： 内容次于功能工具。
输入
- 内容类型： 这是技术教程（代码密集）、叙事故事（图片密集）还是正式白皮书？
- 排版系统：
fluid-typography-system中定义的基本字体大小和比例。 - 阅读环境： 内容主要是在移动设备（无干扰）还是桌面设备（多列上下文）上阅读？
- 层级映射： 内容的逻辑结构（H1、H2、H3、正文、图注）。
输出
- “黄金容器”规格： 为文本定义的最大宽度，以确保最佳行长。
- 垂直节奏图： 一个边距和内边距系统，用于在段落和标题之间创建可预测的间距。
- 编辑组件蓝图： 拉引引用、旁注、媒体标注和目录的视觉规则。
- 响应式阅读地图： 字体大小和行高如何根据不同屏幕宽度调整以保持可读性。
工作流程
1. 定义“黄金容器”（度量）
影响可读性的最关键因素是每行字符数：
- 最佳范围： 45 到 75 个字符（包括空格）。
- 桌面实现： 通常转化为介于
600px和800px之间的max-width，或者直接用max-width: 75ch——ch单位会跟踪字体的实际字符宽度，因此在字体变化时仍能保持正确。 - 流式尺寸： 对标题和正文文本使用
clamp()（例如，font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem)），这样字体大小会随视口缩放，而不是在断点处跳跃。 - 居中对齐： 将容器居中对齐，以减少因头部大范围移动引起的眼睛疲劳。
2. 建立行高和垂直节奏
行高（行距）以及块之间的间距创造了“呼吸空间”：
- 基本行高： 正文文本的目标为 1.5 到 1.6。对于更小或更复杂的字体，可适当增加。
- “间距比”： 使用一致的间距系统（例如，标题前的间距为基础边距的 2 倍或 3 倍），标题后的间距较小（例如，1 倍）。
- 段落间距： 在网页布局中，使用下边距（
margin-bottom）而非缩进，来分隔段落。
3. 设计编辑性“中断”
通过引入视觉多样性，防止“文字墙”疲劳：
- 拉引引用： 较大的、经过样式设计的文本，用于突出关键见解。
- 旁注/标注框： 明显不同的样式框（通常带有浅色背景或边框），用于放置次要信息。
- 图片/媒体： 定义“包含式”（内联）、“宽幅式”（超出容器宽度）和“全出血式”媒体的规则。
- 标题换行： 对标题和拉引引用应用
text-wrap: balance（并为不支持的浏览器提供回退），避免最后一行出现孤立的单个单词。
4. 构建导航和寻路辅助
帮助用户管理长内容：
- 目录（ToC）： 对于超过 1,000 词的文章，在桌面上提供粘性目录，或在移动设备上提供可折叠的目录。
- 进度指示器： 一个微妙的进度条或百分比指示器，显示剩余内容量。
- 阅读时间： 在顶部提供预计的“X 分钟阅读”，以设定用户期望。
5. 规划响应式排版变化
随着屏幕缩小保持可读性：
- 移动端舒适度： 在小屏幕上，减少水平内边距，但保持舒适的行长。
- 对比度检查： 确保带有背景色的标注框或深色模式切换保持 WCAG AA 对比度。
决策规则
- 字符规则： 如果一行文本超过 80 个字符，则太宽；如果少于 40 个字符，则太窄。调整容器。
- 标题邻近性： 标题应始终比其前面的内容更接近其引入的内容（邻近原则）。
- 媒体宽度逻辑： 技术细节使用“包含式”图片，氛围或叙事转折使用“宽幅式”或“全出血式”图片。
- 节奏的“眯眼测试”： 对着页面眯眼看；你应该看到由清晰、一致的空白分隔开的明显“文本块”。
约束条件
- 可访问性： 文本必须满足 WCAG AA 对比度（4.5:1）。正文副本的字体大小不应小于 16px（1rem）。
- 响应性： 容器必须是流式的（使用
max-width而非固定width）。对于文章内需要适应自身容器而非视口的组件（标注框、嵌入媒体），应使用容器查询（@container）。 - 层级： H1 必须最突出，但正文文本必须最易于阅读。
常见失败模式
- “桌面海洋”： 文本横跨 24 英寸显示器的整个宽度，导致眼睛难以找到下一行。
- 令人窒息的文本： 行高过紧（例如 1.1 或 1.2），导致字母的上下伸出部分（ascenders and descenders）相互碰撞。
- 漂浮的标题： 标题上下间距相等，导致其所属章节不明确。
- 不一致的媒体： 混合使用居中对齐、左对齐和宽幅图片，没有清晰的逻辑系统。
- “无尽滚动”： 一篇 5,000 词的文章中没有寻路辅助或进度指示器，导致用户放弃阅读。
验证标准
- 在桌面上，行长度（度量）介于 45 到 75 个字符之间。
- 正文文本的行高（行距）至少为 1.5。
- 垂直节奏能够将标题与其后续内容清晰地分组。
- 编辑元素（引用、标注框）在视觉上与正文文本区分开来。
- 对于长篇内容，提供目录或寻路辅助。
- 阅读体验已针对移动视口进行测试和优化。
- 所有文本的对比度均满足 WCAG AA 标准。