Improving Content Block Indentation of Blog Post Stylesheets

This article explains why to avoid unnecessary block indentation when styling blog posts. For a smoother reading flow.

It takes you through the change in experience we had. The essence of block indentation. And, when to only indent content blocks.

The 3 elements that get unnecessarily indented with CSS are the ancestor blockquote, ordered list ol, and unordered list ul.

Illustration of how the ancestor blockquote, ordered and unordered list block have their content pushed away from their introductory phrase because of indentation

Yet, it makes sense that all content blocks should align at their column's margin.

What is Indentation?

Indentation, or simply indent, is a space used to inform the start of a paragraph. It is interesting to know that – on the web – paragraphs are the building blocks of lists, blockquotes, and other compound blocks.

There are 4 types of indentations: They are First-line, Full-line, Hanging, and Block Indents.

Comparison of the 4 types of indentation

A First-line indent is a small space, about 1em, at the start of the first line of a paragraph. Meanwhile, a Full-line indent takes the full line space.

Below is the difference between a First-line & Full-line Indent:

First-line Indent Full-line Indent
better unification of paragraphs at the risk of being clumpsy if line-height is small clearer separation of paragraphs at the expense of being disjointed if line-spacing is much

Whichever choice you make is fine. So far you choose your line-height & line-spacing appropriately.

Finally, hanging indent is like a block indent except the first line of the text is outdented.

The Takeaway

While all 4 types of indents can distinguish the start of a paragraph, a block indent can further distinguish multiple paragraphs. This is why block indents are used on compound blocks such as blockquote, ol, caption, figcaption, etc. But then, is it a just use?

The Block Indentation Experience we had

Growing up, we had guides that help us write well. And legible. Our first writing material, a 2D writing book, teaches us a great deal of typography which I never knew until now.

A 2D writing book with labelled lines. The writing block contains Uppercase & Lowercase of the letters A, B, C, and G

You see, the vertical red line is the margin-line creating the margin-area. To the right is where we write contents, in a constrained way.

The contsraints of a 2D writing book

Uppercase letters and ascenders of lowercase letters like b wouldn't exceed the top red line (the Cap/Ascender Height). Descenders such as that of lowercase letter g wouldn't exceed the bottom red line (the Descender Height). And, Lowercase letters like a and c sit within the two blue lines (the midline and baseline).

The height between the midline & baseline is x-height, cap/ascender & descender heights is line-height, while that of descender & cap/ascender heights is line-space.

Isn't that interesting?

After getting a grip of those constraints – we progress to using the, well, normal writing book.

An excercise book with labelled lines. The writing block contains a paragraph and list items. The numberings of the list are placed in the margin-area.

Apart from the baseline and margin-line, there're no other helplines. Cheers to being big boys and girls! 🥂

The highlight

When we write, we put hanging punctuations in the margin-area. What we get is a smooth flow of body text with no characters breaking the margin of alignment.

Sweet!
But, it's sad that this isn't the case on the web.

The Block Indentation Experience We have now

On the web, unlike with papers, the viewport has no visible margin-line, baseline, or any helplines. Thanks to the browser's rendering engine. They do the alignment under the hood.

A webpage with the implicit lines of a text block labelled like that of a 2D writing book.

You'd notice stylesheet authors use CSS margin to create breathing space for contents. Which also create an implicit margin-line that contents should align to.

But the thing is, the space created, called the margin-area, doesn't contain hanging punctuations as papers do.

A webpage containing a list block but with an empty margin-area

This result to markers living in the content-area, pushing away the content block. Thereby, creating unnecessary block indentation. We now have a broken flow of body text. Not cool. Isn't that a misuse of block indentation?

2 Questions:

  1. What's the essence of block indentation?
  2. When should we indent content blocks?

The Essence of Block Indentation

The web gave us a sophisticated platform to write. With pen, we write one after another on paper. But with HTML, we also write within one element on a viewport. Thus, elements can have both siblings and children.

Proper block indentations are created prior to some parent-child or sibling relationships.

Block Indentation and Parent-Child HTML Relationship

When an HTML element contains itself, semantics may require the nested element to be taken out of flow.

For example, when you nest details in another details, the parent-child relationship creates a flat hierarchy by definition. As such, nested details need no block indentation – Its flow should be maintained.

A webpage showing the right way to indent 2 same-element parent-child blocks. Nested details continues to flow in the same plane as its parent. While nested list block flows in a perpendicular direction.

However, an unordered list ul in a list item li needs to be taken out of flow – it shouldn't exist in the same plane as its parent. So, yes, we indent the nested list block into a new content column.

But, the first list block doesn't need to be indented. It wasn't nested.

A webpage with 2 parent-child list blocks. The first pair, noted as the wrong one, has its parent indented away from the introductory phrase.

Ancestor list block ought to flow with its introductory phrase for a smoother transition. The logic also applies to blockquote.

If you wonder, why have we been indenting all list blocks in the first place? I found out it was a workaround for Microsoft Word. And, Browser vendors had to use this style to complement users' expectations at that time.

Block Indentation and HTML Sibling Relationship

A sibling element will also be taken out of the flow if it describes only a part of the document. An example is the definition description dd. Which only describes the definition term dt of a definition list dl.

A webpage showing when 2 sibling relationships should be indented. The sibling 'definition description' is perpendicular to its 'definition term'. Same as the figcaption of a figure element.

A Sum-Up

The essence of Block Indentation is to create a content column that is tangental to the current flow. For uniformity, content columns on each level should align at content start.

A webpage with 2 content columns. Each column's content aligns at its margin-line.

When to Indent Content Blocks

7 content blocks needs to be indented when in any of the following 3 scenarios:

  1. blockquote as a descendant of another blockquote
  2. list blocks (ol, ul, and dl) as a descendant of a list item li or definition term dt – provided there's no immediate blockquote parent
  3. Definition description dd, caption, and figcaption as they describe a part of the document – the definition term dt, table, and figure respectively.

Lòbatan!
Actually, we are not done yet. This comes with some challenges too. Yet, it's fair good that we avoid unnecessary indentation to minimize ragged edges. This creates a smoother reading flow.

What Next?

In the next guide, I'll walk you through how to achieve semantic styling for these content blocks. Because, simply outdenting them won't work.

Till then, Ò dabó! For now, you can go home