Formatting Poetry

This page has been superseded by an improved method using CSS to reach the same results more simply. Please see Formatting Poetry, v.2.

I’ve long searched for a way to render verse attractively in blog posts, and I’ve come up with a solution that (so far) seems to work beautifully. This method requires some additions to the style section of your templates or (preferably) to your stylesheet. Knowledge of CSS is also useful so that you can adapt it if necessary to your specific needs. First up, some of the advantages to the method:


You either have or you haven’t got style
CSS has made web design much easier and more elegant than it was in the past, and it’s thanks to stylesheets that this is possible. If you don’t know what I’m talking about, Google will lead you to loads of good advice. If you don’t have a separate stylesheet, then you’ll at least want a style section in your header. Either way, these four elements here (or some variation) will go there.

ol.poem {
	left: 50px;
} {

li.indent {

li.insh {

This method exploits HTML’s old friend, the ordered list. Normally such a list places a number before each line, but by designating the class poem as having no list style, these numbers will be repressed.

Now it’s up to us which line numbers are rendered by the browser, and to do that we need only add the show class to a particular list item. Of course that will mean manually copying and pasting the class marker into every fifth line, but that isn’t so hard.

In the event that you need to indent a line, say in elegiacs, you could also add indent to each even-numbered list item, but will need to use insh (= indent + show) for every tenth line to cover both numbering and indentation.

Here are the opening lines of Housman’s elegy Sodali Meo (seen here) to illustrate how the markup is used. First the markup, then the result:

<ol class="poem">
  <li>Signa pruinosae variantia luce cavernas</li>
  <li class="indent">noctis et extincto lumina nata die</li>
  <li>solo rure vagi lateque tacentibus arvis</li>
  <li class="indent">surgere nos una vidimus oceano.</li>
  <li class="show">vidimus: illa prius, cum luce carebat uterque,</li>
  <li class="indent">viderat in latium prona poeta mare,</li>
  <li>seque memor terra mortalem matre creatum</li>
  <li class="indent">intulit aeternis carmina sideribus,</li>
  <li>clara nimis post se genitis exempla daturus</li>
  <li class="insh">ne quis forte deis fidere vellet homo.</li>
  1. Signa pruinosae variantia luce cavernas
  2. noctis et extincto lumina nata die
  3. solo rure vagi lateque tacentibus arvis
  4. surgere nos una vidimus oceano.
  5. vidimus: illa prius, cum luce carebat uterque,
  6. viderat in latium prona poeta mare,
  7. seque memor terra mortalem matre creatum
  8. intulit aeternis carmina sideribus,
  9. clara nimis post se genitis exempla daturus
  10. ne quis forte deis fidere vellet homo.

in medias res
Now let’s suppose you want to quote from within a longer work. You can actually designate the start number for each selection of verse in the OL tag. Here’s an example from Eric‘s post on Lucan 1.8-12:

<ol start="8" class="poem">
  <li>quis furor, o cives, quae tanta licentia ferri</li>
  <li>gentibus invisis Latium praebere cruorem?</li>
  <li class="show">cumque superba foret Babylon spolianda tropaeis</li>
  <li>Ausoniis umbraque erraret Crassus inulta</li>
  <li>bella geri placuit nullos habitura triumphos?</li>
  1. quis furor, o cives, quae tanta licentia ferri
  2. gentibus invisis Latium praebere cruorem?
  3. cumque superba foret Babylon spolianda tropaeis
  4. Ausoniis umbraque erraret Crassus inulta
  5. bella geri placuit nullos habitura triumphos?

I’m open to suggestions if anyone has a more elegant solution or a nice bit of tweaking to improve the process, but so far I’m exceedingly happy with the results.

Oh—as to the margin in the poem class: I wrote that bit to clear our avatars at the start of each post, but I like the look of the indented poetry. Margin is the only way to go, by the way, because padding pushes in the line but not the line number.