Better CSS for Run-in Headings - css

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>