Poetry and Verse in the HTML Page

Poetry, or text in verse form is often marked up with <br> elements and &nbsp; character entities to duplicate the form the poet had intended. Another common option is to crudely center each line.

In this article, I will demonstrate the typographic requirements, and the semantic HTML plus CSS I use to meet those requirements.

Typography and Verse

Robert Bringhurst, in The Elements of Typographic Style, has this to say:

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.

Unless you're writing your page in verse form, you're likely quoting the poetry or verse. That implies you should use the <blockquote> element as the poem's container. The <blockquote> may not have an %inline; child. The <pre> element is %block; level, and is exactly what we need for preformatted text.

A Simple Block of Indented Verse

The simplest, and least troublesome markup is a <blockquote> wrapping a <pre> that contains the verse. In this case, I also added the title and author of the poem.

Most browsers default to a monospace typeface for preformatted text. In the style rules, you could set {font-family: inherit;}, and it would have the same font face its parent. That would be the elegant method. It would allow you to change fonts for the verse whenever you change the parent's explicit or inherited value. Unfortunately, this is one more time that IE≤7 has let us down. It does not support the inherit value.

For this bit of verse, I use the inherit value to demonstrate IE's failure. The succeeding demonstrations of centered verse will feed IE an explicit font-family.

        <blockquote class="indentedverse">
          <h3>A Drink With Something In It</h3>

          <p><cite>Ogden Nash</cite></p>
          <pre>
There is something about a Martini,
A tingle remarkably pleasant;
A yellow, a mellow Martini;
I wish I had one at present.
There is something about a Martini,
Ere the dining and dancing begin,
And to tell you the truth,
It is not the vermouth—
I think that perhaps it's the gin.
</pre>
        </blockquote>

A Drink With Something In It

Ogden Nash

There is something about a Martini,
A tingle remarkably pleasant;
A yellow, a mellow Martini;
I wish I had one at present.
There is something about a Martini,
Ere the dining and dancing begin,
And to tell you the truth,
It is not the vermouth—
I think that perhaps it's the gin.

Except for IE's not inheriting the font family, all modern browsers render the verse as desired, flush left, ragged right, indented, and [not] deprived of their chosen form.

Centering the Verse on Its Longest Line

The web author lucky enough to write for modern browsers, and not be required to support IE, has enjoyed the opportunity to learn the many benefits of CSS properties that are unsupported by IE≤7. Among these are the display property values.

An element displayed as table, {display: table;}, will shrink-wrap its content by default. That element can then be centered by setting the side margins to auto.

.verse pre {
  display: table;
  margin: 0 auto;
  }

the sky was

e e cummings

the
      sky
            was
can    dy    lu
minous
          edible
spry
        pinks shy
lemons
greens    coo    l choc
olate
s.

  un    der,
  a    lo
co
mo
      tive      s      pout
                                ing
                                      vi
                                      o
                                      lets

If you're viewing this in a modern browser, e.g. Firefox, Safari, or Opera, you will see an outline on the blockquote and a colored background on the pre. They were added to make clear the verse is shrink-wrapped and centered.

If your browser is IE≤7, you'll see neither a centered verse, nor a shrink-wrapped pre.

To find some degree of cross browser compatibility with IE, we need to discover a work-around for IE's poor support for CSS2.1.

Centering Verse in Internet Explorer

Centering verse on its longest line has an intuitive solution in modern browsers. Many web authors are willing to leave it at that, since it fails gracefully in IE; degrading to an indented format. A complete solution for IE was not intuitive to me until after the fact. It wasn't until I found Indent or Center Verse Quotations by Richard Rutter that I had a clue how to make IE behave. His article was so clear, that I have modeled mine after his.

The IE solution is not at all elegant. It begins by wrapping the verse in a <span>, setting <pre> to {text-align: center;}, and resetting <span> to {text-align: left;}. There is still more to do.

We will need the <span> to act as a block element internally, while remaining inline externally. To do this, we add {display: inline-block;} to the <span> element. Next, the text is made preformatted by the {white-space: pre;} property/value set.

The markup and styles will look like the following.

<blockquote class="ieverse">
  <pre><span>The limerick is furtive and mean
You must keep her in close quarantine
Or she sneaks to the slums
And promptly becomes
Disorderly, drunk and obscene.</span></pre>
</blockquote>
================
  blockquote.ieverse pre {
    font-family: sans-serif;
    text-align: center;
    }

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

Which will render like this:

The limerick is furtive and mean
You must keep her in close quarantine
Or she sneaks to the slums
And promptly becomes
Disorderly, drunk and obscene.

If you view this in Firefox3, Opera9, Safari3, and IE6+, you'll see that all render as desired. The problem now is with Firefox2, which doesn't support {display: inline-block;}, and the markup does not degrade gracefully—the poem loses its form.

For that reason, and another, we'll mark up the verse and style it for modern browsers, then add overrides for IE using conditional comments.

The other reason for that approach is that IE≤7 requires redundant nesting of elements and otherwise unnecessary style rules. IE8 is promised to be HTML4 and CSS2.1 compliant, further reducing the need to pander to the least compliant browser by jiggering the structure to support presentation.

In this final example, the markup will add the <span> tag pair with conditional comments, so only IE≤7 will process them1. The stylesheet overrides will also reside in conditional comments that only IE≤7 will see.

  blockquote.finalverse pre {
    display: table;
    font-family: inherit;
    margin: 0 auto;
    }

<!--[if lte ie 7]>
  <style type="text/css">

  blockquote.finalverse pre {
    font-family: sans-serif;
    text-align: center;
    }

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

  </style>
<![endif]-->

Our final example Limerick's markup will look like this:

<blockquote class="finalverse">
  <pre><!--[if lte ie 7]><span><![endif]-->
The limerick's callous and crude,
Its morals distressingly lewd;
It's not worth the reading
By persons of breeding —
It's designed for us vulgar and rude.
<!--[if lte ie 7]></span><![endif]-->
  </pre>
</blockquote>

The limerick's callous and crude,
Its morals distressingly lewd;
It's not worth the reading
By persons of breeding —
It's designed for us vulgar and rude.

Notes

  1. This will affect the DOM tree in IE. If you plan to use DOM scripting, keep that in mind.