Formatting Poetry

I’ve long searched for a way to ren­der verse attrac­tively in blog posts, and I’ve come up with a solu­tion that (so far) seems to work beau­ti­fully. This method requires some addi­tions to the style sec­tion of your tem­plates or (prefer­ably) to your stylesheet. Knowl­edge of CSS is also use­ful so that you can adapt it if nec­es­sary to your spe­cific needs. First up, some of the advan­tages to the method:

Fea­tures:

• Ren­ders verse as dis­tinct from the rest of the post with­out using block quotes.
• Dis­plays uni­form, unob­tru­sive line num­bers that do not dis­turb the for­mat of the verse.
• Allows for indented lines (e.g., in ele­giacs) with­out also indent­ing the line numbers.
• Allows you to indi­cate the start­ing line num­ber of each selection.

You either have or you haven’t got style
CSS has made web design much eas­ier and more ele­gant than it was in the past, and it’s thanks to stylesheets that this is pos­si­ble. If you don’t know what I’m talk­ing about, Google will lead you to loads of good advice. If you don’t have a sep­a­rate stylesheet, then you’ll at least want a style sec­tion in your header. Either way, these four ele­ments here (or some vari­a­tion) will go there.

ol.poem { margin-left:72px; list-style:none; }
li.show { list-style:decimal; }
li.indent { text-indent:25px; }
li.insh { list-style:decimal; padding-left:25; }

This method exploits HTML’s old friend, the ordered list. Nor­mally such a list places a num­ber before each line, but by des­ig­nat­ing the class poem as hav­ing no list style, these num­bers will be repressed.

Now it’s up to us which line num­bers are ren­dered by the browser, and to do that we need only add the show class to a par­tic­u­lar list item. Of course that will mean man­u­ally copy­ing and past­ing 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 ele­giacs, 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 num­ber­ing and indentation.

Here are the open­ing lines of Housman’s elegy Sodali Meo (seen here) to illus­trate 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>
</ol>

1. Signa pru­inosae vari­antia luce cavernas
2. noc­tis et extincto lumina nata die
3. solo rure vagi lateque tacen­tibus arvis
4. surg­ere nos una vidimus oceano.
5. vidimus: illa prius, cum luce care­bat uterque,
6. viderat in latium prona poeta mare,
7. seque memor terra mor­talem matre creatum
8. intulit aeter­nis carmina sideribus,
9. clara nimis post se geni­tis exem­pla daturus
10. ne quis forte deis fidere vel­let homo.

in medias res
Now let’s sup­pose you want to quote from within a longer work. You can actu­ally des­ig­nate the start num­ber for each selec­tion of verse in the OL tag. Here’s an exam­ple 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>
</ol>

8. quis furor, o cives, quae tanta licen­tia ferri
9. gen­tibus invi­sis Latium prae­bere cruorem?
10. cumque superba foret Baby­lon spo­lianda tropaeis
11. Ausoniis umbraque erraret Cras­sus inulta
12. bella geri placuit nul­los habitura triumphos?

I’m open to sug­ges­tions if any­one has a more ele­gant solu­tion or a nice bit of tweak­ing to improve the process, but so far I’m exceed­ingly happy with the results.

Oh—as to the mar­gin 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. Mar­gin is the only way to go, by the way, because padding pushes in the line but not the line number.