Archives for March, 2012

29
Mar

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.

<ol start="14" class="vrs in1 s49">
        <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>
  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.

<ol start="9" class="vrs s49">
        <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>
  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:

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

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.

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

Linux Latīnē

I’ve just jettisoned Windows XP from my ten year old PC and installed Linux Mint.

I was pretty excited to learn how easy it was to designate a Compose key, which — together with a hyphen before the vowels a, e, i, o, and u — produces a vowel with a macron (so long as you use the U.S. international keyboard).

It’s just as simple as it is on a Mac, where the sequence is alt-a followed by the desired vowel.

Unfortunately the effort to translate the Gnome UI into Latin has never seemed to catch on.

Any other classicists out there using some form of Linux? It’s an interesting platform that I should’ve jumped into years ago.

I’m itching to learn a bit of programming along the way, and hope to do something useful in classics in the process. I’ve already got a few ideas, but there’s a long road ahead.