Formatting Poetry, v.2

I’ve worked out a new working standard for marking up verse through ordered lists in HTML using CSS. Special thanks go to Alun Salt for sharing my Google+ post on the subject and Markos Giannopoulos for responding to Alun’s share with a very helpful tip about using what’s called an nth-child selector to simplify the markup.

You can hop over to my page on Formatting Poetry to see the old standard, and if you do you may notice that there was quite a bit less in the style sheet before.

While that may seem more advantageous, this new method seems to me to make far better use of CSS and eliminates a lot of unnecessary markup within LI (‘list item’) tags. Using the current markup the only thing you’ll be modifying is the OL (‘ordered list’) tag, whereas with the previous version you’d modify that as well as every fifth line and every indented line, which could amount to a daunting number of LI tags and a very tedious chore. That’s an awful lot of extra markup, and kind of flies in the face of what CSS is meant to do.

So here’s the new portion to be put into your style sheet:

ol.vrs {
        margin-left:5em;
        list-style:none;
        position:relative;
}

ol.in2 li:nth-child(2n+2) {
        text-indent:1em;
}

ol.in1 li:nth-child(2n+1) {
        text-indent:1em;
}

.s16 li:nth-child(5n+5) {
        list-style:decimal;
}

.s27 li:nth-child(5n+4) {
        list-style:decimal;
}

.s38 li:nth-child(5n+3) {
        list-style:decimal;
}

.s49 li:nth-child(5n+2) {
        list-style:decimal;
}

.s50 li:nth-child(5n+1) {
        list-style:decimal;
}

The first indicates the fact that you’re dealing with verse, and the next two may be used indicate which lines should be indented.

.vrs (= ‘verse’)
This marks the ordered list as a snippet (or more) of verse to be set with a given margin and with numbers suppressed, to be called out as desired by another class.

.in2 (= ‘indent line 2′)
This indicates that the verse cited is in elegiacs (vel sim.) and that the browser should indent every other line beginning with the second line.

.in1 (= ‘indent line 1′)This indicates that the verse cited is in elegiacs (vel sim.) but that the quotation begins with an indented line. Thus the browser should begin indenting with the first line.

The remainder are used to ensure that line numbers appear only on the fives and the zeros, no matter which starting number you use (but you absolutely must indicate the correct starting number). 16, for example, means that your starting verse number is or ends with a 1 or a 6, and it tells the browser to show the numbers only for the fifth line and every fifth line after it. If you use 38, then it tells your browser to show the numbers only for the third line and every fifth line after it. And so on.

Here are some examples:

Propertius 3.17, 13–16.

<ol start="13" class="vrs in1 s38">
        <li>quod si, Bacche, tuis per fervida tempora donis</li>
        <li>accersitus erit somnus in ossa mea,</li>
        <li>ipse seram vites pangamque ex ordine colles,</li>
        <li>quos carpant nullae me vigilante ferae.</li>
</ol>

13. quod si, Bacche, tuis per fervida tempora donis
14. accersitus erit somnus in ossa mea,
15. ipse seram vites pangamque ex ordine colles,
16. quos carpant nullae me vigilante ferae.

Lucan 1.8—12.

<ol class="vrs s49" start="9">
        <li>gentibus invisis Latium praebere cruorem?</li>
        <li>cumque superba foret Babylon spolianda tropaeis</li>
        <li>Ausoniis umbraque erraret Crassus inulta</li>
        <li>bella geri placuit nullos habitura triumphos?</li>
</ol>

9. gentibus invisis Latium praebere cruorem?
10. cumque superba foret Babylon spolianda tropaeis
11. Ausoniis umbraque erraret Crassus inulta
12. bella geri placuit nullos habitura triumphos?

When I worked it out the first time I used an elegy by Housman, and the lines were formatted in this way (notice the extra, tedious markup on every other line):

The old markup:

<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>

The new markup:

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

Result of the old markup:

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.

Notice how much simpler the new markup will be for anyone who chooses to employ it.

Result of the new markup:

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.

It is virtually identical, but the really important thing is that it’s much easier to do. There are no superfluous class attributes clogging the LI tags, and once you understand them, the classes for the OL tag are pretty intuitive: vrs in2 16 = “a bit verse alternately indented beginning with the second line, and cited from a line number ending in a 1 or a 6.”

Just remember that if the starting line is something other than 1, you need to add the ‘start’ attribute and the starting number, e.g., start=”2″, to the OL tag as in many of the examples above.