in Digital Humanities, Technology

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.

THE NEW STANDARD

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

/* New CSS for Formatting Poetry, Dennis McHenry, 3/29/2012. Thanks to
   Markos Giannopoulos for the hint about nth-child selectors, and to
   David Primmer for suggesting CSS comments to clarify usage. */

/* VERSE (.vrs)
   This marks the ordered list as a snippet (or more) of verse to be
   set with a given margin and with numbers suppressed, which will be
   called out as desired by another class (i.e., .s16, etc.). */

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

/* INDENT FROM THE 2ND LINE (.in2)
   For elegiacs (vel sim.). Verses are indented alternately beginning with the
   SECOND line cited. */

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

/* INDENT FROM THE 1ST LINE (.in1)
   For elegiacs (vel sim.), when the lines printed begin with an indented line. */

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

/* STARTING LINE (.s16, etc.)
   Show every line number which is a multiple of five, based on the final digit
   of the first line of the passage. If the final digit of the first line cited
   is a 1 or a 6, choose .s16; for a 2 or a 7 choose .s27; for a 3 or an 8
   choose .s38; for a 4 or a 9 choose .s49; and for a 5 or a 0 choose .s50. */

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

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.

EXAMPLES

Propertius 3.17, 14–16.

  1. accersitus erit somnus in ossa mea,
  2. ipse seram vites pangamque ex ordine colles,
  3. quos carpant nullae me vigilante ferae.
  1. accersitus erit somnus in ossa mea,
  2. ipse seram vites pangamque ex ordine colles,
  3. quos carpant nullae me vigilante ferae.

Lucan 1.8—12.

  1. gentibus invisis Latium praebere cruorem?
  2. cumque superba foret Babylon spolianda tropaeis
  3. Ausoniis umbraque erraret Crassus inulta
  4. bella geri placuit nullos habitura triumphos?
  1. gentibus invisis Latium praebere cruorem?
  2. cumque superba foret Babylon spolianda tropaeis
  3. Ausoniis umbraque erraret Crassus inulta
  4. 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:

  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.

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.

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

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.

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.

ADDENDUM

It can still be a little tedious to add the LI tag to each line of poetry, but if you’re using WordPress this can done automatically by pasting the block of text in the Visual Editor then highlighting the whole block and clicking the ordered list from the editing panel. If you switch back to the HTML Editor you’ll see that you have a perfectly formatted and very clean bit of markup, and need only add the starting number (if not 1) and the required classes.

Just beware of the Visual Editor potentially altering anything you might have done previously in the HTML Editor (e.g., those markup examples printed above became unreadable and had to be re-pasted).

I’m sure that other WYSIWYG editors can also make that part of the process a little easier, but otherwise the HTML editor is the way to go to ensure clean markup.

BONUS
Maybe I’m getting carried away here, but I’ve added another optional bit that may be helpful for making a large block of verse a little easier to read: alternating background colors (white to light gray).

/* Slightly distinguish alternating lines with a light tone.
   Aesthetic option for easier web viewing of blocks of verse. */

ol.alt li:nth-child(2n+2) {
        background-color: #f9f9f9;
}

Homer, Odyssey 20.492–501.

  1. ὣς ἔφατ᾽, οὐδ᾽ ἀπίθησε φίλη τροφὸς Εὐρύκλεια,
  2. ἤνεικεν δ᾽ ἄρα πῦρ καὶ θήϊον· αὐτὰρ Ὀδυσσεὺς
  3. εὖ διεθείωσεν μέγαρον καὶ δῶμα καὶ αὐλήν.
  4. γρηῢς δ᾽ αὖτ᾽ ἀπέβη διὰ δώματα κάλ᾽ Ὀδυσῆος
  5. ἀγγελέουσα γυναιξὶ καὶ ὀτρυνέουσα νέεσθαι·
  6. αἱ δ᾽ ἴσαν ἐκ μεγάροιο δάος μετὰ χερσὶν ἔχουσαι.
  7. αἱ μὲν ἄρ᾽ ἀμφεχέοντο καὶ ἠσπάζοντ᾽ Ὀδυσῆα,
  8. καὶ κύνεον ἀγαπαξόμεναι κεφαλήν τε καὶ ὤμους
  9. χεῖράς τ᾽ αἰνύμεναι· τὸν δὲ γλυκὺς ἵμερος ἥιρει
  10. κλαυθμοῦ καὶ στοναχῆς, γίγνωσκε δ᾽ ἄρα φρεσὶ πάσας.
  1. ὣς ἔφατ᾽, οὐδ᾽ ἀπίθησε φίλη τροφὸς Εὐρύκλεια,
  2. ἤνεικεν δ᾽ ἄρα πῦρ καὶ θήϊον· αὐτὰρ Ὀδυσσεὺς
  3. εὖ διεθείωσεν μέγαρον καὶ δῶμα καὶ αὐλήν.
  4. γρηῢς δ᾽ αὖτ᾽ ἀπέβη διὰ δώματα κάλ᾽ Ὀδυσῆος
  5. ἀγγελέουσα γυναιξὶ καὶ ὀτρυνέουσα νέεσθαι·
  6. αἱ δ᾽ ἴσαν ἐκ μεγάροιο δάος μετὰ χερσὶν ἔχουσαι.
  7. αἱ μὲν ἄρ᾽ ἀμφεχέοντο καὶ ἠσπάζοντ᾽ Ὀδυσῆα,
  8. καὶ κύνεον ἀγαπαξόμεναι κεφαλήν τε καὶ ὤμους
  9. χεῖράς τ᾽ αἰνύμεναι· τὸν δὲ γλυκὺς ἵμερος ἥιρει
  10. κλαυθμοῦ καὶ στοναχῆς, γίγνωσκε δ᾽ ἄρα φρεσὶ πάσας.

Write a Comment

Comment

  1. Very nicely done. Wrapping each line with an tag is child’s play with any editor that uses regular expressions. Anyone manipulating texts would do well to peel back the mighty text replacement capabilities of regular expressions. Each line can be grabbed by the expression ^.* where the caret indicates “start of line,” the dot indicates “any characters” and the asterisk means repeat as many times as there are characters in that line. Since we want to remember the results, we wrap .* in parentheses so we now have ^(.*) Now we use the replacement statement \1 where \1 means use the match we just found. Regular expressions can help us find difficult to search terms like any vowel a|e|i|o|u or verbs with multiple roots fer|tul|lat very handy.