5

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

许多其他学术风格也有嵌入的标题——例如，芝加哥的五个标题级别；和哈佛扩展的“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;
}
4

1 回答 1

3

原始答案

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

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

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

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

我对此的唯一解决方案是将间隔类添加到手动占用多行的标题（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上述类型的作品，但如果你碰巧在 a or之后只有一个段落h5，然后使用另一个h4or ，你可能会在不想要的地方磨合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>

于 2022-02-27T23:53:19.523 回答