更好的 CSS 用于插入标题

Question

编辑 22 年 3 月 18 日：我最近检查了几个使用条款和类似文档，发现此类文档中经常出现插入标题，但总是错误地格式化为<strong>而不是标题，所以这个问题似乎很多比学术风格指南更广泛。

---

多年来，我一直在努力解决插入式标题的格式问题。 这不是一个小问题，因为学术界和学术工作中最重要的 styles 之一 APA要求（APA 是严格的，不像某些风格指南那样灵活）第 4 级和第 5 级标题的插入标题（ https:// apastyle.apa.org/style-grammar-guidelines/paper-format/headings )

许多其他学术 styles 也有磨合标题——例如， 芝加哥的五个标题级别； 和Harvard Extension 的“C”级标题。

我过去只是将插入标题的格式设置为粗体，但这并不能正确解释辅助技术的文档结构。 所以我现在使用下面的 CSS，因为display: run-in目前不是 CSS 选项。 结果是小故障。

例如，当标题在浏览器页面上换行时，标题后会出现一个中断。 对更好的代码有什么建议吗？

H4.enpara {
  text-indent: 2em;
  display: inline-block;
  break-before: column;
  margin-bottom: -1em;
}

H4.enpara + P {
  display: inline;
  margin: 0 0 .7em 0;
}

Answer 1

原始答案

注意：这个概念是正确的，但它有缺陷，见h2标题“编辑，它比我想象的更复杂”

原始答案：我们不能只在两者上都使用inline并在标题上应用左边距吗？

然后对于间距，我们只需在插入段落的左侧添加0.15em的边距。

唯一的缺点是您最终可能会得到双倍空格，因为在 Chrome 中会自动为行内段落和标题添加一个额外的字符。

我唯一的解决方案是将间隔符 class 添加到手动占用多行的标题（ margin-left ）。

尽管稍作微调，您会发现它几乎不引人注意，但它很小。 正如您所指出的那样，它仍然比使用粗体更容易访问，而且我认为间距差异不会大到足以给有阅读障碍等的人带来任何问题。

 h4, h5 { margin-left: 2em; display: inline; } h4 + p, h5 + p { display: inline; margin-left: 0.15em; }

 <h4>a long heading that will wrap onto two lines to ensure that browser wrapping does not break our run-in system</h4><p>a paragraph</p> <p>another paragraph that does not have a run-in</p> <h4>Another heading</h4> <p>another paragraph with a run-in.</p> <p>a longer paragraph to ensure there isn't an issue with the run-in happening for the heading itself on a paragraph <h5>a heading level 5 to test it works for that also</h5> <p>a further paragraph that should have a run-in also</p>

编辑，这比我想象的要复杂

上述类型的作品，但如果你碰巧在h4或h5之后只有一个段落然后使用另一个h4或h5 ，你可能会在不想要的地方磨合。

我可能犯了一个错误并且没有经过广泛测试，但这似乎是所有标题级别的正确格式要求。

我不得不使用一些技巧来解决 h4 后接 h5 只有一个段落的插入问题，并解决引入::after伪元素引起的间距问题。

我认为下面的行为是正确的，但你需要像我说的那样广泛地测试它。

它唯一没有涵盖的是更正标题大小写，因为据我所知，如果没有 JS，这是不可能的。

最后，我在 REM 中设置了所有间距，然后如果有人增加他们的浏览器大小，它会适当缩放。 您可能需要注意的唯一一件事是左边的 2rem 边距是否有效，或者它是否应该是一个固定的数量（如果您将字体大小增加四倍，例如左边距可能会太大）。

解决方法是将左边距设置为固定单位，例如px ，我将由您自行调查/决定。

 h1, h2, h3, h4, h5{ font-size: 1rem; font-weight: bold; } h1{ text-align: center; } h3, h5{ font-style: italic; } h4, h5 { margin-left: 2rem; display: inline; } h4 + p::after, h5 + p::after{ content: ""; height: 1rem; display: block; clear: both; } h4 + p, h5 + p { display: inline; margin-left: 0.15rem; } h4 + p + p, h4 + p + h1, h4 + p + h2, h4 + p + h3, h4 + p + h4, h4 + p + h5, h5 + p + p, h5 + p + h1, h5 + p + h2, h5 + p + h3, h5 + p + h4, h5 + p + h5{ margin-top: 0rem; }

 <h1>H1 - Centered, Bold, Title Case Heading</h1> <p>Text begins as a new paragraph.</p> <h2>H2 - Flush Left, Bold, Title Case Heading</h2> <p>Text begins as a new paragraph.</p> <h3>H3 - Flush Left, Bold Italic, Title Case Heading</h3> <p>Text begins as a new paragraph.</p> <h4>H4 - Indented, Bold, Title Case Heading, Ending With a Period.</h4> <p>Text begins on the same line and continues as a regular paragraph.</p> <h5>H5 - Indented, Bold Italic, Title Case Heading, Ending With a Period.</h5> <p>Text begins on the same line and continues as a regular paragraph.</p> <h2>H2 - Flush Left, Bold, Title Case Heading</h2>

Answer 2

@Graham Ritchie的回答似乎很有效，但不是h4 + p + p, h4 + p + h1...的粉丝。 希望这对你有用：

 h1, h2, h3, h4, h5 { font-size: 1rem; font-weight: bold; } p { text-indent: 2rem; } h1 { text-align: center; } h3, h5 { font-style: italic; } h4, h5 { display: inline; margin-inline-start: 2rem; } h4 + p, h5 + p { display: inline; margin-inline-start: 0.5rem; } h4 + p::after, h5 + p::after { content: ""; display: block; margin: 1rem; }

 <h1>H1 heading</h1> <p>Text following h1</p> <h2>H2 heading</h2> <p>Text following h2</p> <h3>H3 heading</h3> <p>Text following h3</p> <h4>H4 heading</h4> <p>Text following h4</p> <p>Text following h4 + p</p> <h4>H5 heading</h4> <p>Text following h5</p> <h5>H5 heading following h5 + p</h5> <p>Text following h5</p> <h2>H2 heading following h5 + p</h2> <p>Text following h2</p>