——让章节标题融入正文流的排版手法)
Hallmark 组件详解S4 Inline无断行内联标题——让章节标题融入正文流的排版手法【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark在 AI 生成界面普遍“千篇一律”的今天把每一个章节都做成“带边距数字标签 大标题 分隔线”的三段式几乎已经成为 LLM 输出的条件反射。而 Hallmark 这个为 Claude Code、Cursor 和 Codex 设计的 anti-AI-slop 设计技能给出了一套截然不同的思路章节标题不一定非得单独占位、制造一次“空间断裂”它完全可以像一个从段落中自然生长出来的小写小型大写短语悄悄嵌进正文流里。本篇将基于仓库中 S4 Inline (no break) 组件文档深入讲解这一“无断行内联标题”的定位、适用场景、HTML/CSS 实现细节并结合 Hallmark 的宏结构体系、排版纪律与反模式清单说明它为什么是长文叙事类页面的正确选择。S4 是什么从段落中“长出来”的标题S4 的完整定义只有一句话标题是一个以小型大写样式呈现的短语它“出现”在正文流内部不产生任何空间上的断裂The heading is a small caps phrase that emerges inside the body flow; no spatial break。与 Hallmark 组件库中其余四个章节头Section head组件不同S4 不做分隔、不悬停、不贴边、不吸顶——它只是正文中的一句变奏。官方给出的骨架实现如下p… span classhead-inlineA small heading./span …/p.head-inline { font-variant-caps: all-small-caps; letter-spacing: 0.06em; font-weight: 500; }注意两段代码各自的克制HTML 层面标题不是h2而是span塞在p的段落内部。这意味着在文档语义outline上它并不承担标题角色——真正的阅读层级完全由排印本身传达而不是由标签等级传达。CSS 层面只有三个属性。font-variant-caps: all-small-caps把整段短语渲染成小型大写字母包括原本就是大写开头的字母letter-spacing: 0.06em用轻度字距拉开“标签感”font-weight: 500让它比正文略重一点又不至于跳成黑体标题。这个组合的视觉效果是读者读到一半段落里忽然出现一行同字号的、大写字距稍开的短语既不打断行文又完成了一次层次切换。它更像文章里的“小标”而不是页面上的“栏目名”。什么时候用 S4以文字为主的页面文档给出了明确的适用条件Use when: the page is prose-led; reading should be continuous.页面以文字叙述为主阅读应当保持连贯。Dont confuse with: S2 Hanging不要与 S2 悬挂式标题混淆后者靠留白把标题与正文分开。“prose-led”文字驱动的是关键词。S4 适合的是那种读者要一口气读下去的页面——案例研究、创始人口吻的发布文、杂志式长文、产品背后的“哲学声明”。在这些页面里如果每个段落组前都插一个占满整行的h2和一条分隔线阅读就会像过减速带一样被一次次打断S4 让层次切换发生在行文内部页面因此读起来像“作品”而不是“功能列表”。Long Document长文档宏结构 是 S4 最典型的宿主该宏结构把页面定义为“关于产品的一篇文学”The page is literature about the product其 Heading 轴明确写成inline with body — section heads emerge from the paragraph flow as small caps or bold short phrases标题内联于正文章节头以小型大写或加粗短语的形式从段落流中浮现并给出了一模一样的.inline类使用示例article classprose p classlede…/p p…/p h2 classinlineA small heading./h2 p…/p blockquote…/blockquote p… a hrefread more →/a …/p /article可以看到即使 Long Document 采用了语义上的h2它的样式依然是内联的、不占行、不换段——这与 S4 的.head-inline是同一套排版逻辑的两种写法。与 S2 的关键区别有没有“空间断裂”S4 文档特意提醒不要与 S2 混淆。对比两者S2 · Hanging悬挂式标题标题“浮”在区块上方的负空间中靠padding-block: var(--space-3xl) var(--space-xl)制造出大片留白。它没有边框、没有分隔线但标题与正文之间有明确的竖向空间断裂读者能清楚感到“这里换了一节”。S4 · Inline标题就藏在段落里前后都是正文文字零空间断裂。读者要一直读下去标题只是行文中被排版强调的一个词。一句话概括S2 用“留白”分隔S4 用“行内变奏”切换。前者适合需要呼吸感的安静内容后者适合必须一气呵成的连续叙述。与 S1 / S3 / S5 的横向对比把 S4 放回整个 Section head 组件族里看它的性格更加清晰组件标题位置空间关系适用场景S1 · Left-margin numbered窄左栏放01 — LABEL.宽右栏放标题与内容标签与标题横向分栏editorial / specimen 型页面S2 · Hanging悬在区块上方的负空间靠留白分隔无边框无规则安静、有呼吸感的内容S3 · Sticky pinned滚动时钉在视口内随滚动移动position: sticky内容密集、需要方向感的长区块S4 · Inline本篇嵌在正文段落内部无任何空间断裂prose-led 页面阅读需连续S5 · Bottom-anchored放在区块内容下方标签成为内容结尾内容为主角、标签只是收尾尤其值得注意的是 S1 在 Hallmark 体系里的地位它在 structure.md 结构轴文档 中被标记为⚠️ Opt-in only — never default仅限主动选用——绝不默认因为“左栏标签 右侧标题”的两栏章节头正是 slop-test 门66点名封杀的 AI 模板特征详见后文。相比之下S4 内联标题天然规避了这一陷阱——它根本没有标签栏也就不可能犯“标签在左、标题在右”的模板错误。S4 与 Typography 纪律为什么这样设置字形S4 的样式并非随手写就它逐条对应着 Hallmark 排版规范 中关于小写小型大写与字距的规定小写小型大写all-small-caps规范明确标签/小字应用松字距——letter-spacing: 0.08em到0.14em、text-transform: uppercase若字体支持小型大写则用font-variant-caps: all-small-caps。S4 的0.06em处于这一区间的下限附近因为它不是页面级的“章节眉标”而只是行文内部的一个强调短语字距太开会破坏行文连续性。字体数量上限21 规则整个页面最多三种字体族——display、body 加一个可选的 outlier。S4 的实现只用了 body 的粗度变体500不引入任何新字体族因此它不会触碰“第四个字体族即 slop”的红线。小型大写需要字体支持all-small-caps依赖字体自带的 small-caps 字形。仓库 tokens.css 中默认的 display 字体如 Fraunces、Geist 等均支持该特性若项目字体不支持应回退到text-transform: uppercase并配合更小的字号与更松的字距来模拟而不是硬性合成。从字号体系看S4 内联标题刻意不调用--text-*尺寸令牌token保持与正文同号只靠字重和字距制造区别——这正是“不出列”的排版意图所在。页面仍须遵循 4pt 间距刻度与命名空间令牌如 tokens.css 中的--space-xl、--color-ink但 S4 本身几乎不消耗间距因为它的“间距”就是正文的行距本身。S4 在结构轴中的位置Inline with bodyHallmark 把“章节标题的放置方式”定义为结构指纹的六个轴之一其中与 S4 对应的是Inline with body内联于正文这个选择No section break — the heading emerges from the paragraph flow. Conversational.没有章节断裂——标题从段落流中浮现。对话式。该轴对它的评价是“Conversational对话式”参考样例是 Medium 文章与长文随笔。在整张轴表里这是唯一一个“不做任何空间隔离”的放置方式与 Hanging悬挂、Centered display居中展示、Sticky / pinned吸顶、Numbered display编号展示同样被标记为仅限主动选用形成对照。需要强调两点结构性事实S4 属于“合法且鼓励”的类别。同表里 Left-margin左栏标签与 Numbered display编号展示都被标注为“仅限主动选用、默认禁用”而 Inline with body 没有该限制——它是 prose-led 页面里可以放心默认使用的章节头方案之一。它服务于结构多样化的核心使命。Hallmark 的差异化规则要求同一页面内任意两个区块不得使用相同的组件原型连续两次输出也不得复用同一宏结构。S4 的意义正在于给“功能列表式”页面之外的叙事型页面提供一个结构上完全不同的章节头选项避免所有页面都长成同一个模板。在主题theme层面structure.md 的主题建议指纹表中Terminal主题的 Heading 轴就是Inline (withprompt)——内联标题加一个提示符这是 S4 思路在 CLI 语境下的变体而Aurora / Bloom / Linen等主题则分别使用 Hanging、Centered、Hanging说明 S4 与这些“负空间驱动”的主题在结构上刻意保持距离防止两个相邻章节头长得一样。组合实战在 Long Document 宏结构里落地 S4将 S4 嵌入 Long Document 宏结构可以得到一套完整的、可复制的叙事型页面骨架。综合宏结构文档的六轴默认值与 S4 组件文档推荐的组合是结构轴Long Document S4 的取值章节头S4 Inline小型大写短语内联于段落正文单栏行高 1.65行长 60–65ch分隔负空间偶尔居中放一个装饰符如 ❦强调按钮段落内的文字链接不做独立按钮块图片内联、按正文行宽缩放绝不整幅出血呈现Reveal无。页面就这样“直接存在”落地代码可这样组织整合 S4 与宏结构文档的示例article classprose p classlede凌晨六点十四分。面团在午夜就绪。/p p麦芽的甜味在房间里发酵……/p span classhead-inline— 关于温度/span p发酵的温度决定了一切。我们把石板预热到……/p blockquote“面包是时间的剖面。”/blockquote p想了解我们的原料来源a href继续读下去 →/a/p /article/* Hallmark · macrostructure: Long Document · S4 knobs: capsall-small-caps, spacing0.06em, weight500, anchormid-paragraph · … */ .prose { max-width: 62ch; line-height: 1.65; } .head-inline { font-variant-caps: all-small-caps; letter-spacing: 0.06em; font-weight: 500; margin-inline: 0.25em 0.5em; /* 给前后文字各留一点呼吸但不断行 */ }三个容易出错的细节不要用display: block或强制换行。S4 的灵魂是“不出列”。一旦给.head-inline加上display: block或让它独占一行它就退化成 S2 的廉价版本失去了内联的意义。注意语义层级。S4 用span表示它不参与文档大纲。如果你的项目要求可访问的章节锚点请改用 Long Document 文档中的h2 classinline写法语义是标题、样式仍内联并确保视觉样式与.head-inline一致。字距与字体支持。0.06em是针对支持 small-caps 的字体调出的值若实际字体回退到大写模拟建议把字距微调到0.08em–0.1em区间以维持“标签感”。移动端行为在 component-cookbook.md 移动端折叠表 中S4 这类行内组件无需专门适配60rem约 960px布局断点与 40rem约 640px排版断点都不影响它的表现——内联标题随正文自然换行不依赖任何网格。这正是 S4 结构上的鲁棒性没有两栏、没有 sticky、没有绝对定位因此也就不存在窄屏下需要“塌缩”的机制。页面容器仍应保证padding-inline ≥ clamp(1rem, 4vw, 1.5rem)与 40rem 以下 ≥44×44px 的点击目标但这些是全局规则与 S4 本身无关。与反模式清单的对照S4 规避了什么Hallmark 的反模式文档anti-patterns.md里几乎每一条“AI 模板特征”都是 S4 天然免疫的标签左、标题右的两栏章节头Gate 66 硬禁止。这是“最可靠、最模板化的编辑风 AI 特征”。S4 没有标签栏从根上不可能犯此错。每个区块都放眉标eyebrow。反模式清单要求 eyebrow 默认关闭除非内容真正有序号语义。S4 的行内小标既不是大写等宽眉标01 / EXAMPLES那种也不是独立区块的序数标签——它是叙述里自然浮现的短语不构成“眉标滥用”。居中一切Centred everything。S4 内联标题天然与居中绝缘它只随正文流左对齐。等宽数字、大写正文等排版误用。S4 只用字重与字距变化不引入等宽、不改大小写语法、不加渐变文字。换句话说选择 S4 不仅是选择了一种美观的叙事排版更是在结构层面主动避开了 slop-test 中针对“模板化编辑风”的核心门禁Gate 66。配合 Hallmark 的预发布自评pre-emit self-critique与 69 项 slop-test 门禁SKILL.md 中定义的默认设计流程可以确保prose-led 页面不再落入“hero → 三个特性 → CTA → footer”的结构陷阱而是真正长得像一篇作品。小结S4 的取舍判断S4 Inlineno break是 Hallmark 五个章节头组件中唯一“零空间断裂”的选项其取舍逻辑非常清晰用 S4当页面以连续阅读为核心案例研究、创始人文、杂志式长文、使命声明你希望读者从头读到尾而不被打断。Long Document、Letter 等叙事型宏结构是它的天然宿主。不用 S4当页面有一个明确的主导动作下单、注册、开始试用S4 会把 CTA 藏进行文里——Long Document 宏结构文档 明确警告“Long Document 会隐藏 CTA这对交易型页面是错的”。区分 S2需要“呼吸感”、允许标题与正文之间有一次空间停顿选 S2 Hanging必须一气呵成选 S4。一份克制到只有三行 CSS 的组件定义背后是整套 anti-slop 设计哲学真正的“非模板化”不是靠更换配色和字体而是靠结构本身的差异化。S4 让你在段落中间完成一次无声的层次切换——这正是“看起来像人做的而不是生成的”这一 Hallmark 目标见 SKILL.md在章节头这个最小单元上的具体落点。【免费下载链接】hallmarkAnti-AI-slop design skill for Claude Code, Cursor, and Codex.项目地址: https://gitcode.com/GitHub_Trending/hal/hallmark创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考