让 Ink 与 Terminal 成为稳定的阅读风格
放大字体会使共用页脚溢出。 在 320px 视口、32px 根字号/默认字号下,英文 Ink 的文档宽度达到 424px,Terminal 达到 408px。对比覆盖样式没有修复这一共用缺陷。两份原型均未稳定,也未获准升级为稳定预设。
状态、归属与范围
状态与日期:草案,2026-10-26;提出设计方向,不是实现契约
最终负责人:OINK 维护者;分别记录每个预设的验收决定
交付归属:主题维护者负责 CSS、解析器与专项检查器;文档维护者负责双语契约、真实站点夹具与浏览器审查;无障碍评审者负责人工任务证据
基线:OINK v1.4.0;本地源码身份与含未提交修改的快照边界见研究记录
版本意向:面向后续版本,完成精修后分别决定是否升级为稳定预设;不建议新增预设
背景与证据
Ink 与 Terminal 已作为显式启用的实验存在。共用外壳让读者切换风格后仍能沿用导航、搜索、外观控制与内容语义,这是它们的优势。剩余问题包括装饰重复、正文以外的字体分工、主题自有组件的形状不一致,以及验收覆盖不足。Ink 已经是 中性无衬线编辑风格;改为衬线会占用 Folio 的独立定位。Terminal 应成为 易读的工程手册,以等宽字体承载技术角色,以比例字体承载解释性正文。
带日期的研究区分了源码事实、实测结果、设计判断和有限 CSS 覆盖实验。正常字号测量、间距探测及专项检查提供了积极证据,但整页页脚溢出仍然存在。手动 200% 文字放大与 400% 浏览器缩放验收仍需独立于 32px 字号偏好探测完成。
目标与明确排除项
| 预设 | 受众与主要任务 | 共用外壳内的独立定位 |
|---|---|---|
| Paper | 广泛的文档读者;指南与持续阅读 | 温暖的 Plex Sans 阅读表面、克制的圆角组件;继续作为默认值 |
| Slate | 既有技术/产品站点;参考导航与产品展示 | 既有冷色调、Inter/Chakra/Plex 字体角色及更丰富的 Landing 表现;保留兼容选择 |
| Ink | 编辑、作者及长文档、随笔、设计论证的读者 | 中性 Inter/CJK 无衬线、方正扁平表面、清晰正文下划线,以及少量红色或作者强调色 |
| Terminal | 工程师与运维人员;操作流程、配置查阅与代码解释 | Plex Sans 解释性正文、等宽标题/控件/标识符、青绿/薄荷色链接、琥珀强调色及扁平 2px 形状 |
两种候选都必须适用于 Docs、Book、Blog、画廊、Expo 与 Landing,覆盖中英文、深浅色及宽窄视口。它们都不是独立外壳、无障碍模式或表格密度模式。本次排除新渲染器、全局间距改动、字体下载、运行时依赖、终端特效、移动选择轨迹、凸起 Tabs、带框 Field 名称和 Paper 标题尾线。
两个可选概念继续留在 1.4 范围之外:
| 概念 | 独立的未来用途 | 成本与处置 |
|---|---|---|
| Folio | 学术与书籍出版:衬线阅读角色、学术图注/注释,无衬线导航/搜索,等宽代码 | 需要匹配的中英文衬线方案、许可、本地字体体积及回退/打印/设备验收。保留共用外壳,不引入侧边注释栏。有研究价值,但不取代 Ink。 |
| Canvas | 面向创作者的活泼几何展示:沿用无衬线字体,控制淡紫/赭色强调及少量几何标记 | 本身不必增加字体,但需新增配色/状态/形状规则、素材指引、菜单与完整回归覆盖。现有证据较弱,与 Slate 重叠明显。等待真实创作任务证明价值。 |
提议行为与边界
保留配色,明确角色
初期保留以下源码颜色。表中为浅色/深色配对,不构成新的配置权威;预设 SCSS仍是实现归属。在改色相之前,先减少重复强调。
| 角色 | Ink 浅色/深色 | Terminal 浅色/深色 |
|---|---|---|
| 画布 | #ffffff / #0b0b0b |
#f4f5f2 / #0c0f0e |
| 正文 | #141414 / #ededed |
#1d211f / #d3dbd6 |
| 强调文字 | #000000 / #ffffff |
#111713 / #edf4ef |
| 次级文字 | #474747 / #b5b5b5 |
#4a514d / #9aa59f |
| 第三级文字 | #636363 / #8f8f8f |
#606b63 / #8b9990 |
| 次级表面/代码标题栏 | #f4f4f4 / #161616 |
#e9ebe6 / #141a18 |
| 第三级表面 | #ffffff / #161616 |
#f8f9f6 / #18201c |
| 代码块 | #fafafa / #111111 |
#ffffff / #0a0d0b |
| 链接 | #141414 / #ededed |
#0a6560 / #4cc9bd |
| 悬停链接 | #c8102e / #ff5c4d |
#084f4b / #7de0d7 |
| 默认强调色 | #c8102e / #ff5c4d |
#935400 / #f0a73a |
| 链接填充上的前景 | #ffffff / #0b0b0b |
#ffffff / #0c0f0e |
| 普通边框 | 正文 RGB,alpha 24% / 24% | 正文 RGB,alpha 32% / 32% |
| 强分隔线 | 正文 RGB,alpha 55% / 50% | 正文 RGB,alpha 55% / 55% |
| 行内代码 | 正文前景;正文 RGB 填充 5% / 6% | 正文前景;正文 RGB 填充 5% / 7% |
成功、警告、错误与信息保留各自的语义色、图标和标签。不能把 Ink 的全部状态变红,也不能把 Terminal 的全部状态变成薄荷色。中性徽章不能看起来像成功状态。装饰分隔线可以较淡;识别控件所必需的边界要独立测量对比度。
作者设置的 theme_color 继续控制强调表面。真实文档使用蓝色 #245f94/#5da2dd,Book 使用橙色 #9a3412/#fb923c,Blog 使用紫色 #6d28d9/#a78bfa。它们不会取代链接/代码文字角色。作者强调色和预设默认值均需审查。
保留阅读角色,验证真实字体回退
| 角色 | Ink 默认值 | Terminal 默认值 |
|---|---|---|
body |
Inter + 平台无衬线 | IBM Plex Sans + 平台无衬线 |
ui |
Inter + 平台无衬线 | Code 角色:IBM Plex Mono + 等宽回退 |
heading |
Body 角色 | UI 角色 |
code |
IBM Plex Mono + 等宽回退 | IBM Plex Mono + 等宽回退 |
display |
Heading 角色 | Heading 角色 |
meta |
UI 角色 | UI 角色 |
brand |
UI 角色 | UI 角色 |
print |
Body 角色 | Body 角色 |
Book 图注、表格描述及供人阅读的搜索标题/摘要使用正文角色。作者编写的章节编号保留其含义,沿用所属标题的字体角色。Terminal 的技术路径、命令控件和标识符保持等宽。Field 名称保持无框、600 字重。描述性 Terminal 表头改用正文角色 0.875rem/600;普通正文保留 1rem/1.7 与共用阅读宽度。展示标题沿用页面尺度并允许换行;不能为了容纳等宽界面而缩小移动端正文。
现有无衬线回退顺序为 -apple-system、BlinkMacSystemFont、PingFang SC、Hiragino Sans GB、Microsoft YaHei、Segoe UI、Roboto、Helvetica Neue、Arial、Noto Sans SC、通用 sans-serif 与 emoji。等宽列表在 IBM Plex Mono 后依次为 SFMono-Regular、Cascadia Code、Roboto Mono、Menlo、Consolas、Liberation Mono、Sarasa Mono SC、Noto Sans Mono CJK SC 和通用 monospace。列出字体名称不会安装字体。YaHei 排在 Segoe 之前,也可能承载拉丁字符。中文不必占用拉丁等宽字符格。保留语言元数据、typography: system、显式角色及旧 Sass 优先级;在真实 Windows/Android 上分别检查字体已加载、被阻止、系统字体和角色覆盖条件。(字体匹配)
建立层级与按语言区分的链接规则
比较 Ink 正文 h1 的 750 字重/-.025em 字距、h2/h3 的 700/-.012em,以及替代现有粗线的 1px 强线条 token 顶线。中文标题字距为零。取消次级标题、表头、提示块标题的强制大写与字距。Terminal 标题使用 600/零字距;移除生成的 ##/### 及提示块括号,保留作者的 Book 编号、语义标签与标题锚点。不添加伪提示符、闪烁光标特效或装饰性标题尾线。
Ink 正文链接静止时保留原生下划线,包括列表、注释与引用。Terminal 保留持续可见的非颜色链接提示;在真实正文中验证既有半粗体提示,提示不足时使用原生下划线。导航依靠位置和持续的当前状态标记。悬停不得改变布局、字重或命中区域。(GOV.UK 链接)
下划线位置仍待评审。覆盖实验使用 max(1px, .06em) 线宽、.22em 偏移,并对中文比较 .25em/skip-ink: none。不接受一律使用 .25em 的规则。 应比较英文 .12–.18em 与中文 text-underline-position: under 加 0–.06em 小偏移,先使用 skip-ink: auto。按实际语言限定,覆盖英文页面内的中文块。测试混合字符、标点、下伸部、行内代码及跨行链接;线条不得碰撞字形或相邻行。(CSS Text Decoration 草案)
统一组件状态
自有组件圆角:Ink 0px、Terminal 2px,无层叠阴影;纳入目前写死 0.6rem 的 FileTree 圆角。保留图片、头像、状态圆点与 vendor 形状。
当前/选中:Ink 保留静态强调色侧线;Terminal 保留中性反色行/标记。保留程序可识别状态。悬停、选中与键盘焦点相互区分,不使用移动胶囊。
焦点:立即呈现静态指示,在每种相邻表面上独立测量,强制颜色模式下可见;不全局清除轮廓。
文字选择:从现有作者强调色填充开始:alpha 浅色 22%、深色 35%;测量合成后的文字/行内代码配对。必要时通过归属角色修复,不能假定该不透明度已经合格。
Tabs:扁平标签、静态底部选中线、独立焦点;无凸起活动标签。保留键盘、hash/存储行为、长标签和触控区域。
Fields 与输入框:技术 Field 名称不加框,说明保持正文。真正的输入控件仍需持续标签、可辨边界和关联错误文字;占位文字不能单独充当标签。
代码与表格:克制的单层边框;保留语法语义、注释、复制、标题、表头关系与数字对齐。描述性表头可换行,不全表大写。保留作者指定的宽度/溢出策略及局部滚动入口。
注释、引用、脚注:重要内容持续可见;语义标记/线条克制,出处紧邻,引用/返回链接可用。不添加巨大引号、全篇中文斜体或侧边注释栏。
卡片、步骤、徽章、折叠块:标签与形状稳定;区分可点击与静态内容,保留真实步骤编号、原生折叠语义及带标签的状态。
搜索与外观:搜索标题/摘要使用正文角色,技术路径等宽;匹配、选中和弱化文字均可读。保留对话框焦点及返回、输入法编辑、加载/错误/无结果反馈,以及移动键盘展开时的可操作性。
Landing、Blog/画廊、Book、Expo:保留现有构图与媒体行为;展示标题、图注、署名与工具适应各自阅读任务。不对图片表面施加全局方角重置。
保留输出、vendor 与安全边界
Mermaid/ECharts 继续 只跟随深浅模式;API 控件保留 vendor 配色及既有模式行为。不向 vendor DOM 增加预设重着色层。Giscus 自动配色跟随预设与模式,显式覆盖仍有优先权,但本次未验收被阻止的远程 iframe。打印在白纸上使用浅色预设;无 JavaScript 时保留站点默认浅色与可读内容。Markdown/RSS 保留语义内容,不泄漏装饰前缀或控件。继续使用现有转义、字体/颜色输入校验、本地素材和外观存储行为,不新增网络权限或脚本依赖。
兼容与迁移
保留预设名称、独立的模式/风格状态、外壳列宽、断点、内容语法与作者覆盖。Paper 继续默认,维护中的消费站保留显式 [paper, slate, ink, terminal] 菜单。精修可以随版本交付,同时继续保持实验状态。
升级为稳定预设会改变 preset_menu: true 的结果:它提供稳定预设与站点默认值,因此任一实验升级都会扩大自动集合。必须在 layouts/_partials/preset-config.html、归属检查器和双语配置/版本指引中明确处理。显式列表仍保留作者选择的成员。升级需要逐预设的维护者验收,不能只改状态标签。保留 Folio/Canvas 保留名称的警告/回退行为。
实现与归属检查器计划
| 阶段/负责人 | 工作与证据 |
|---|---|
| 共用修复/外壳维护者 | 在页脚归属实现中修复收缩/换行;为全部四个预设增加覆盖到页脚的整页滚动宽度与内容可见性断言。不得用裁切或隐藏溢出代替修复。 |
| 精修/主题维护者 | 在既有预设、字体及组件归属实现中落实受审方案。先运行 bin/check-presets.py、bin/check-font-tokens.py 和受影响的组件/输出检查,保留冻结的 Slate。 |
| 集成/文档维护者 | 在真实双语页面上扩展外观、字体、组件与文字重排套件,纳入整页检查和附注视觉审查。使用同级源码运行 make check、make browser,通过 make dev 审查。 |
| 稳定化升级/维护者与评审者 | 关闭下列门禁;在同次交付中更新归属实现/检查器和受影响的双语契约,再记录长期理由及面向用户的迁移说明。 |
运行时修改还需 node --test 'tests/js/**/*.test.js';Schema 修改需 python3 bin/generate-config-schema.py --check。
验收门禁与待决问题
区分无障碍要求与项目强化目标
以 WCAG 2.2 A/AA 为基线(参考资料访问日期为 2026-10-26)。
| 门禁 | 必须完成的评估 |
|---|---|
| 文字与控件 | 普通文字 4.5:1;符合大字条件的文字 3:1(常规 24px 或粗体 18⅔px,中文采用等效尺寸)。识别控件/状态所需的视觉信息与相邻颜色达到 3:1;装饰分隔线另论。纳入代码注释、占位文字及全部选中/悬停状态。(1.4.3、1.4.11) |
| 重排与放大 | 分别测试 320 CSS px 重排、手动 200% 文字放大,以及从 1280px 视口开始的 400% 浏览器缩放。必要的二维区域需逐项说明,代码/表格并非一概豁免。同时关闭独立的 320px/32px 字号压力阻塞项。(1.4.10、1.4.4) |
| 间距 | 同时覆盖行高 1.5、段后距 2em、字距 .12em、词距 .16em,不丢失内容或功能。这些是用户覆盖值,不是默认排版;评估适用的中文/混排属性。(1.4.12) |
| 键盘与语义 | 焦点可见,获得焦点的控件不被作者内容完全遮挡;状态不只靠颜色,语言、标题、标签和表格关系正确。字符快捷键需可关闭、可重映射或仅在所属组件获得焦点时激活,不能仅在输入框内禁用。适用的搜索状态无需移动焦点即可播报。(2.4.11、2.1.4、4.1.3) |
| 最小目标 | AA 要求 24×24 CSS px,或符合例外。间距例外要求:以每个小目标为中心画直径 24px 的圆,该圆既不能与其它目标相交,也不能与另一个小目标的圆相交;另有行内、等效控件、用户代理及必要表现例外。(2.5.8) |
| 拟议强化目标 | 常用触控控件 44×44px;正文 7:1;整个焦点控件/轮廓可见;静态指示面积至少等于 2px 周长线,并在同一像素位置具有 3:1 状态变化,同时满足相邻颜色对比度。这些超出 AA,需明确采纳,也不意味着全页 AAA。(2.5.5、1.4.6、2.4.13) |
完整任务记录先于稳定化升级
两种语言、两种模式都必须覆盖 320/390/768/1440px,包括正常、放大及覆盖间距的文字。审查长文顶部/中段/页脚、标题/Book 编号、URL、Fields、表格、代码、搜索、外观、媒体与 Landing。检查静止/悬停/当前/选中/焦点/文字选择、强制颜色、减少动态效果,以及无 JavaScript/打印/Markdown/RSS。记录实际颜色配对与 axe 不完整结果的人工审查。
真实 Windows Chrome/Edge、Android Chrome 的字体/渲染工作仍待完成,品牌版 macOS/iOS Safari 检查也未完成。记录设备、操作系统、浏览器与字体条件。人工任务仍需 Windows 上的 NVDA、真实 Safari 上的 VoiceOver、Android 上的 TalkBack:遍历标题及有意义编号,读取表格/字段错误,使用中文输入搜索,听取简洁状态反馈,打开/关闭对话框并恢复焦点。
待决事项包括中文下划线方案、项目强化目标、必要的状态颜色修复,以及各预设是否升级。门禁未关闭时,保持实验状态或推迟精修;其它 1.4 工作无需等待新风格。
决策日志
| 日期 | 拟议决策与状态 |
|---|---|
| 2026-10-26 | Ink 保持中性无衬线编辑风格,Terminal 成为易读工程手册;保留当前配色与作者强调色。建议采纳方向,尚未完成稳定性验收。 |
| 2026-10-26 | 优先修复共用放大字号页脚;保留扁平 Tabs、无框 Fields,不恢复 Paper 尾线。通过既有归属实现移除 Terminal 装饰标点。 |
| 2026-10-26 | 中文下划线替代方案与强化无障碍目标继续待评审;探索性探测不关闭稳定化门禁。 |
| 2026-10-26 | 1.4 不新增预设;Folio/Canvas 保留独立的未来定位。逐预设升级及自动菜单扩展需明确验收。 |