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
blockquote, ordered list
ol, and unordered list
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.
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.
While all 4 types of indents can distinguish the start of a paragraph, a block indent can further
multiple paragraphs. This is why block indents are used on compound blocks such as
figcaption, etc. But then, is it a
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.
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
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
Lowercase letters like
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.
Apart from the baseline and margin-line, there're no other helplines. Cheers to being big boys and girls! 🥂
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.
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.
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.
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?
- What's the essence of block indentation?
- 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.
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
But, the first list block doesn't need to be indented. It wasn't nested.
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
An example is the definition description
dd. Which only describes the definition term
of a definition list
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.
When to Indent Content Blocks
7 content blocks needs to be indented when in any of the following 3 scenarios:
blockquoteas a descendant of another
- list blocks (
dl) as a descendant of a list item
lior definition term
dt– provided there's no immediate
- Definition description
figcaptionas they describe a part of the document – the definition term
Actually, we are not done yet. This comes with some challenges too. Yet, it's
that we avoid unnecessary indentation to minimize ragged edges. This creates a smoother reading flow.
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