Run-in 标题更好 CSS
Better CSS for Run-in Headings
编辑 22 年 3 月 18 日：我最近检查了几个 使用条款 和类似的文件，发现 run-in 标题经常出现在这种类型中的文档，但总是错误地格式化为 <strong> 而不是标题，因此这个问题似乎比学术风格指南更广泛。
多年来，我一直在努力解决 run-in 标题的格式问题。这不是一个小问题，因为学术界和学术工作中的顶级风格之一，APA，需要（APA 是严格的，不像某些风格指南那样灵活）run-in 标题对于 4 级和 5 级标题 (https://apastyle.apa.org/style-grammar-guidelines/paper-format/headings)
许多其他学术风格也有 run-in 个标题 — 例如，Chicago's five heading levels; and Harvard Extension's "C" level headings。
我过去只是将 run-in 标题的格式设置为粗体，但这并不能正确解释辅助技术的文档结构。所以我现在使用下面的 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;
}
原答案
注意：概念是对的，但是有瑕疵，见h2标题“编辑，比我想象的更复杂”
原回答：
我们不能只在两者上都使用 inline 并在标题上应用 left-margin 吗？
然后对于间距，我们只需在 run-in 段落的左侧添加一个 0.15em 边距。
唯一的缺点是您最终可能会得到双 space，因为会自动为 Chrome 中的行内段落和标题添加一个额外的字符。
我唯一的解决办法是在手动占用多行的标题中添加 spacer class（margin-left）。
它很小，虽然有点 fine-tuning 你可以看到它几乎不引人注意。正如您指出的那样，它仍然比使用粗体更容易理解，而且我认为间距差异不会大到足以给有阅读障碍等的人带来任何问题。
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 上的 run-in，然后是只有一个段落的 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>
@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>
编辑 22 年 3 月 18 日：我最近检查了几个 使用条款 和类似的文件，发现 run-in 标题经常出现在这种类型中的文档，但总是错误地格式化为 <strong> 而不是标题，因此这个问题似乎比学术风格指南更广泛。
多年来，我一直在努力解决 run-in 标题的格式问题。这不是一个小问题，因为学术界和学术工作中的顶级风格之一，APA，需要（APA 是严格的，不像某些风格指南那样灵活）run-in 标题对于 4 级和 5 级标题 (https://apastyle.apa.org/style-grammar-guidelines/paper-format/headings)
许多其他学术风格也有 run-in 个标题 — 例如，Chicago's five heading levels; and Harvard Extension's "C" level headings。
我过去只是将 run-in 标题的格式设置为粗体，但这并不能正确解释辅助技术的文档结构。所以我现在使用下面的 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;
}
原答案
注意：概念是对的，但是有瑕疵，见h2标题“编辑，比我想象的更复杂”
原回答：
我们不能只在两者上都使用 inline 并在标题上应用 left-margin 吗？
然后对于间距，我们只需在 run-in 段落的左侧添加一个 0.15em 边距。
唯一的缺点是您最终可能会得到双 space，因为会自动为 Chrome 中的行内段落和标题添加一个额外的字符。
我唯一的解决办法是在手动占用多行的标题中添加 spacer class（margin-left）。
它很小，虽然有点 fine-tuning 你可以看到它几乎不引人注意。正如您指出的那样，它仍然比使用粗体更容易理解，而且我认为间距差异不会大到足以给有阅读障碍等的人带来任何问题。
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 上的 run-in，然后是只有一个段落的 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>
@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>