All the best blogs tend to be written by experts, and also tend to keep to a specific field or topic—my blog does neither of those things. For example, this post is about separating paragraphs using CSS, I’m only just starting to learn CSS, and this is my first post dedicated to the subject. Some of what’s included below was touched upon in my previous post, specifically the section dedicated to what I’d learnt while using CSS to build my Kindle mock-up.
While writing my Kindle post last week, it made me think about how paragraphs are typically distinguished from one another in print and on the web. That led me to look into how various paragraph spacing solutions can be implemented with CSS.
On the web, where an article is typically presented as one long page of text (essentially giving the author access to infinite vertical space) paragraphs are typically separated by some extra whitespace. But, in print, and on eReader devices, where content is presented on pages of fixed height, paragraphs tend to be separated by simply indenting the first line. This results in more text on a single page when compared to adding whitespace.
Strictly speaking, this indentation is only necessary for paragraphs that directly follow other paragraphs. No indentation is required when a paragraph follows a heading, sub header, figure, blockquote, etc.
Luckily, there exists a CSS Selector specifically designed to target an element that directly follows another element, i.e. the "+" selector. And as we need to only target paragraphs that follow other paragraphs, we simply use:
p + p {text-indent: 2.3em;}
You’ll notice that all the paragraphs above have an indent, with the exception of this paragraph (which follows a code block), and the first paragraph (which follows a heading), i.e. neither of these paragraphs directly follow another paragraph. The first paragraph does start with a ‘drop cap’ though, and that can be implemented via the "+" selector in CSS as well.
I decided that I wanted to use a drop cap at the start of each new chapter, specifically the first letter of the first paragraph following each h2 heading. To target the first paragraph after the h2 heading, we simply use h2 + p. We don’t want to apply the drop cap style to every letter in that paragraph, we only want to target the first letter. To do this we add the ::first-letter CSS Selector.
h2 + p::first-letter {
float: left;
font-size: 2.3rem;
line-height: 1;
margin: 0 0.1em 0 -0.1em;
padding: 0.1em;
}
That’s all that’s required, two little bits of CSS, neither of which you have to assign to any individual paragraph, and you end up with 3 different paragraph separators. i.e. indented, drop cap, and normal i.e. flush.