Better CSS for Run-in Headings

Question

Edit 3/18/22: I recently checked several Terms of Use and similar documents and found run-in headings are frequent in this type of document but always incorrectly formatted as <strong> rather than as headings, so this issue appears to be much broader than academia style guides.

---

I have been wrestling with the format of run-in headings for years. This is not a minor problem, because one of the top styles in academia and scholarly work, APA, requires (APA is strict, not flexible like some style guides) run-in headings for both level 4 and 5 headings (https://apastyle.apa.org/style-grammar-guidelines/paper-format/headings)

Many other academic styles also have run-in headings — for example, Chicago's five heading levels; and Harvard Extension's "C" level headings.

I used to just format run-in headings as bold, but that does not correctly interpret the document structure for assistive technologies. So I now use the CSS below, since display: run-in is not currently a CSS option. The results are glitchy.

For instance, a break appears after the heading when the heading wraps on the browser page. Any suggestions for better code?

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

Original Answer

Note: the concept was correct, but it had flaws, see the h2 heading "Edit, it was more complicated than I thought"

Original answer: Could we not just use inline on both and apply a left-margin to the heading?

Then for spacing we just add a 0.15em margin to the left of the run-in paragraph.

The only down side is that you can end up with a double space as an extra character is automatically added for an inline paragraph and heading in Chrome.

The only solution I have for that would be to add a spacer class to headings that take up more than one line manually (the margin-left).

It is minor though as with a bit of fine-tuning you can see it is barely noticeable. It is still more accessible than using bold as you pointed out and I don't think the spacing difference is large enough to cause any problems to people with dyslexia etc.

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>

Edit, it was more complicated than I thought

The above kind of works, but you can get run-in where it is not intended if you happen to only have a single paragraph after a h4 or h5 and then use another h4 or h5.

I may have made a mistake and this is not extensively tested, but this appears to be the correct formatting requirements for all heading levels.

I had to use a couple of tricks to account for run-in on a h4 followed by a h5 with only a single paragraph and to counter a spacing issue that introducing the ::after pseudo element caused.

I think the below behaves correctly, but you would need to test it extensively as I said.

The only thing it doesn't cover is correcting Title Case as that isn't possible without JS as far as I am aware.

Finally I have set all spacing in REM, then if someone increases their browser size it will scale appropriately. The only thing that you may have to look at there is whether a 2rem margin on the left works or whether that should be a fixed amount (if you quadrupled the font size for example the left margin would be too large probably).

The fix would be to set the left margin in a fixed unit such as px, I will leave that up to you to investigate / decide.

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's answer seems to work well, but not a fan of the h4 + p + p, h4 + p + h1.... Hopefully this works well for you:

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>