Tinderbox Forum

Using CSS to style APA formated document

The APP style guide calls for H4 and H5 to be indented five spaced and ahvethe have the following paragraph on the same line as the heading. For example

indented 4 spaces Heading 4. This is some text.
indented 5 spaces Heading 5. This is some text.

I’ve tied a few different CSS approaching, e.g.:

/*apa calls for h4 "Indented, Bold, Title Case Heading, Ending With a Period. Text begins on the same line and continues as a regular paragraph". CSS can't do title case, so handle this in the TBX template  */

h4 {
 text-align: left;
 text-indent: 5%;
 font-weight: bold;
 font-style: normal;
 font-size: 16px;


h4::after { 
  content: " .";

The above will get the indent, but I can’t seem to get the following paragraph on the same line. I tried adding `display: inline-block and variations of this. adding the display element will get the text on the same line, but then I lose the indent. Does anyone have any idea how to do this?

Your challenge is that HTML headings are block-level elements, i.e. they are rendered discretely in the vertical plane (page), but you want them displayed inline.

Unstated, but a further expectation is likely that the input text will have the heading and following body text on discreet lines, e.g.

This is an H4.
This is a normal paragraph

giving HTML

<h4>This is an H4.</h4>
<p>This is a normal paragraph</p>

but you want the web-rendered output to be on one line,

This is an H4. This is a normal paragraph`

The basic fix is to tell the block-level heading elements to use the CSS style display:inline; but you then face the problem that paragraphs (i.e. <p> tags) are also block level. But, you only want the first paragraph after the heading.

The latter is possible by using the p:nth-of-type(1) CSS selector:

h4, p:nth-of-type(1) {display: inline;}

However, that only works in a small test. If there are multiple H4s in the document, the above only targets the first one (not what I initially expected, but CSS are like regex—very precise!). Thus you need a wrapper div to give context (N.B. the div is not rendered visibly):

<div class="apa">
<h4>A level 4 Title.</h4> 
Some text.
More text.
<div class="apa">
<h4>Another level 4 Title.</h4>
Stuff about H4s.
More stuff

With the CSS of:

.apa h4, h5, p:nth-of-type(1) {display: inline !important;}

You may not need !important but it is worth knowing about.

This gives us:

Test file is here: inline-heading.tbx (96.1 KB)

Note each discrete inline heading needs the wrapper to contextualise p:nth-of-type(1). I suspect this shifts your problem to how you shim your headings with <div> elements. I’d simply put it in the $Text or template, even if working—as you do—with Markdown. As some point the look of you writing space ($text), in terms of being ‘code’-free, has to compromise as your ouptut style demands become more precise/niche.

Above I’ve used a CSS class apa as I suspect you might want to parameterise the class name based on the citation style you are using in any given document re-using existing ‘code’. This you might have different CSS for .apa and chicago ready-baked in your CSS but only the correct one invoked by the actual content.—or none, as a <div> is by default an invisible structural HTML element.

†. This overrides this—and only this—CSS style command in any style set close to the element in the inheritance chain, e.g. via an ID vs. a class. See CSS !important Property.

How about something like this?

.apa h4+p {
     display: inline;

Testing in the same test doc as posted above, it doesn’t work, even for the first para #1 after an h4. Plus only the first paragraph wants to be inline whereas para#2 et seq need to be block elements as usual. Rendered result of the above CSS:

It really does need the extra intervention described further above. Saddest is that academic publishing work has yet to embrace r digitally native text and update their formats. :frowning:

Thanks. @mwra, this works to get the text inline but the h4 and h5 loose their 3em indent, they are flushed to left align? Getting so close, but not there yet.

But, did you add a style for that? :wink:

The demo just makes an H4 or H5 (more precisely only the first H4 or H5 descended from an apa class-styled element) inline and bolded. If you want more styling you need to add it.

†. In the demo, this was a <div>

We solved this just now but I’d address one error I’d made (I blame my memory):

.apa h4, h5, p:nth-of-type(1) {display: inline !important;}

Doesn’t, as I thought address an h4, h5 or first paragraph descended from an ‘apa’ class object. Why? CSS uses a coma for lists, where each item applies the rules following in the {} brackets. Breaking out my list we see I got the code wrong:

.apa h4

when I meant:

.apa h4
.apa h5
.apa p:nth-of-type(1)

which, when rolled up looks like

.apa h4, .apa h5, .apa p:nth-of-type(1) {display: inline !important;}

close to the original at first sight, but actually correct - as seen when tested in a more complex setting.

So, in CSS thingA-space-thingB means thingB is descended from thingA (not just a direct child) and a comma implies a list with each list item being referenced independently of other list items.

CSS are powerful but can give the same experience on first non-trivial use as with regex: they do what you tell them to do, not what you imagined you told them to do!

Still, being old enough to have been writing formatted web pages before CSS arrived, no way I’d want to trade.