2.3.2 In continuous text mark all paragraphs after the first with an indent of at least one en

Ornaments [] drop lines [] outdented paragraphs [] and others, have their uses but the plainest, most unmistakable yet unobtrusive way of marking paragraphs is the simple indent.”

Indenting the first line of a paragraph, or any block element is achieved in CSS using the text-indent property:

p {
   text-indent:1em }

The preceding rule will indent every paragraph, however we only wish to indent paragraphs that follow another paragraph. To achieve this, an adjacent sibling selector (+) can be used:

p + p {
   text-indent:1em }

Further, the line space between paragraphs which most browsers insert by default should be removed. Browsers create this line break by adding a top and bottom margin to paragraphs; the bottom margin should be removed from all paragraphs, and the top margin removed from those paragraphs which follow another paragraph:

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

There is no limit to how much you indent by, but you may wish to start by describing a square. This can be achieved by setting your indent to the same value as your line-height.

It should be noted that Internet Explorer 6 does not support the adjacent sibling selector. In the above examples, IE6 will not indent any paragraphs, instead paragraphs will be marked with a line break.

Indentation is not the only way to indicate a paragraph. The many alternatives include: simple block paragraphs, outdenting, ornamented indents, ornamentation within a continuous stream, or droplines.

Block Paragraphs

As stated earlier, block paragraphs – paragraphs separated by line breaks – are the default method used by web browsers. As explained in §2.2.2 the margins separating paragraphs should be set equal to the line-height in order that the rhythm of the text is maintained.

Outdenting

Marking paragraphs by outdenting them into the margin is achieved in the same manner as indenting: simply use a negative number for the indent.

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

Ornaments

Ornamented indentation, unlike standard indentation, does not necessarily require the use of text-indent to achieve the primary effect (although it can aid clarity). The key to achieving this effect is the use of the CSS 2.1 :before pseudo-element to specify the ornamentation. The following example would insert a floral heart at the beginning of a subsequent paragraph:

p {
   margin-bottom: 0 }
p + p:before { 
  content: "2767"; 
  padding-right: 0.4em;
  margin-top:0 }

In the above example, applying a text-indent to the paragraph would cause the ornament to be indented with the first line of the paragraph; to separate the ornament from the content, padding-right has been applied to the generated content.

Another use of ornaments as paragraph markers is to have a continuous stream of text with paragraphs separated by ornaments. To achieve this, the paragraphs should be set to display as inline elements, with ornamentation specified as before (in this case a decorative pilcrow is used in place of the floral heart bullet):

p { display: inline }
p + p:before { 
  content: "2761"; 
  padding-right: 0.1em;
  padding-left: 0.4em }

It should be noted that the afore mentioned rules for ornaments will not work in Internet Explorer (up to version 7 at the time of writing) as it does not support the content property of CSS. Additionally Firefox on Windows (tested on XP SP2 at the time of writing) will only display those ornaments which are contained within the current font. Essentially these limitations imply that the afore-mentioned technique cannot be relied upon to work on Windows machines at present. Alternative techniques would be to use background image instead, or to include actual images in the code which, if sized in ems, would resize in proportion to the text.

Droplines

Dropline paragraphs start one line down, at the horizontal place on the page that the previous paragraph finished. Unlike other styles mentioned, dropline paragraphs for long pieces of text are impossible to achieve consistently in CSS without exorbitantly long CSS files or (preferably) the aid of JavaScript.

A technique that can be applied is similar to that used for a continuous stream of text, in that it uses display:inline to achieve the horizontal positioning. Once the paragraphs are positioned horizontally, a relative top position equal to the line height applied to subsequent paragraphs can create the desired vertical positioning (and thus the full drop line effect):

p {
  display: inline; 
  position: relative }
p + p {top: 1.3em }

The problem with this approach is that the vertical positioning is not relative to the previous paragraph, only the parent box, and so all paragraphs after the first dropped paragraph appear to simply be part of a continuous stream of text. To achieve the full effect requires that each subsequent paragraph have a multiple of the original top position:

p {
  display: inline; 
  position: relative }
p + p {top: 1.3em }
p + p + p {top: 2.6em }
p + p + p + p {top: 3.9em }

Specifying top positions this way is clearly unwieldy, and a perfectly reasonable candidate for implementing in JavaScript. The technique might be applicable to display material where there are only short runs of text.

Rhythm & Proportion

§ Blocks & Paragraphs

Reference

Cover of ‘The Elements of Typographic Style’ by Robert Bringhurst