2.3.4 Indent or center verse quotations

Verse is usually set flush left and ragged right, and verse quotations within prose should not be deprived of their chosen form. But to distinguish verse quotations from surrounding prose, they should be indented or centered on the longest line.”

When setting verse, whether on the web or otherwise, the primary concern is not to deprive it of its “chosen form”, including matters of spacing and visual structure (as this is considered, in many poetic works, to be at least as important as the words themselves). As such, a pre (pre-formatted) element is most apt to setting verse.

<blockquote class="verse">
<pre>God guard me from those thoughts men think
In the mind alone;
He that sings a lasting song
Thinks in a marrow bone.</pre>
</blockquote>

In its default state the pre element is usually rendered using a monospaced font, so this should normally be changed to a more fitting typeface. Setting the font-family to inherit the typeface from the surrounding text may be a good start:

.verse pre {
  font-family: inherit;
}

A logical way to center the verse on the longest line would be to simply specify width:auto and margin:0 auto. Unfortunately, due to browsers’ rendering of preformatted elements, the element will still be considered to comprise full-width lines, so no centering will occur. However we can work around this by specifying the pre element to display as a table as follows:

.verse pre {
  font-family: inherit;
  display: table;
  width: auto;
  margin: 0 auto;
}

The preceding rules achieve the desired layout in Firefox, Safari and Opera 9. However margin:0 auto will not center elements in Internet Explorer 6 or 7, without a specific width being set. To work around this, a new span element containing the entire block of verse must be nested within the pre element as follows:

<blockquote class="verse">
<pre><span>God guard me from those thoughts men think
In the mind alone;
He that sings a lasting song
Thinks in a marrow bone.</span></pre>
</blockquote>

This span can then be centered in Internet Explorer applying text-align:center to the pre and resetting the text alignment on the span element.

.verse pre {
  text-align: center;
}

.verse pre span {
  text-align: left;
}

Much like other browsers, Internet Explorer considers any preformatted content to have full-width lines; to counter this, the span can be set to display:inline-block. This in turn causes Internet Explorer to ignore white-space formatting, so we must re-set the span to white-space:pre. This gives us:

.verse pre {
  text-align: center;
}

.verse pre span {
  text-align: left;
  display: inline-block;
  white-space: pre;
}

The display:inline-block in the preceding rule causes Gecko-based browsers such as Firefox and Camino to incorrectly render the contents. Fortunately these rules are only required for Internet Explorer, so we can write them in a separate style sheet, included using conditional comments (see Quirksmode for more info):

<!-[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie-lte-7.css" />
<![endif]->

Here’s the final rendered example of prose, set flush left & ragged right, and centered on the longest line:

God guard me from those thoughts men think
In the mind alone;
He that sings a lasting song
Thinks in a marrow bone.

Rhythm & Proportion

§ Blocks & Paragraphs

Reference

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

Cover of ‘Web Typography’ by Richard Rutter