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.