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>