INDENTED PARAGRAPHS

INDENTED PARAGRAPHS

Scale model of the Eiffel tower in Parc Mini-France

Here is something simple: indenting the first line of each paragraph. Many people find that easier to read than empty lines between the paragraphs, especially for long texts, and it also allows to reserve empty lines for more important breaks.

The trick here is to only indent paragraphs that follow other paragraphs. The first paragaph of a page doesn't need to be indented, and neither do paragraphs that follow a diagram, a heading or something else that is offset from the text. The rules are in fact very simple:

p {
  margin-bottom: 0 }
p + p {
  text-indent: 1.5em;
  margin-top: 0 }

This indents the first line of only those paragraphs that follow another paragraph. It also suppresses space below all paragraphs and above indented paragraphs. But in practice you will find that you still need exceptions.

In this page, for example, there are P elements that are used as captions for images (see the “Figures & captions” example). We have centered them, and thus they should not be indented. A simple rule 'p.caption {text-indent: 0}' takes care of it. You can see that we indeed used that rule in the example.

We can now use various amounts of whitespace between paragraphs to indicate important breaks in the text. Let's define three different classes: stb (small thematic break), mtb (medium thematic break) and ltb (large thematic break). We have given this paragraph a class of stb, so you can see the effect.

p.stb { text-indent: 0; margin-top: 0.83em }
p.mtb { text-indent: 0; margin-top: 2.17em }
p.ltb { text-indent: 0; margin-top: 3.08em }