Site Map Links Contact

Macro-Typography of Poetry: 2

The window and outer container

Your first choice will be whether to cram several poems onto your web page or to present just one poem per window. The only powerful reason for massing several poems or songs onto a single served page is to allow economical printing without a waste of paper. However if you are still thinking print, your expectations of the electronic display are probably still too modest. Try to make your visual-display presentation so compelling that readers will regard a printout as an inferior alternative. That means, in my view, that there should be only one poem per window, so that the reader can concentrate on a single creation at a time. Your first macro-typographical choice will involve the balance between positive and negative space, the places where the poem is and where it isn't. Putting that even more simply: allow generous white space on all four sides of the poem.

If you are going the HTML way, start by nesting the entire poem between tags with the generic name DIV. Give this a class name, for example "poem". Tag each of the verses with the P tag. The result should look like this:

<DIV class=poem>
<P>Cars pass</P>
<P>Where do they go</P>
<P>Will one stop</P>
<P>For me</P>

You now want to apply the various controls that CSS makes available to you. You'll start by choosing a typeface. Let's assume you're happy with a serifed font and provide a standard list, like this: .poem {font-family: Georgia, Times, "Times New Roman", serif;}

In most cases you will not want to specify a text size, as it should be up to the user to set a size that is comfortable for reading. Next, you'll want to apply some padding to pull the poem away from the edges of your so-called viewport. Since one of our purposes is to develop a layout that would be readable on anything from a PDA up to the huge monitors provided for designer workstations, it is best to use percentage units for this. Remember that CSS provides a shorthand, in which the padding sizes can be specified in clockwise order: top, right, bottom, left. You could therefore choose, for example: .poem {padding: 10% 15% 30% 15%; font-family: Georgia, Times, "Times New Roman", serif;}, whereby the left and right margins are set to 15 per cent. You may want to shade this padded area as well. In the example I've done this with a fairly strong colour, "oldlace". Normally I would advise a less prominent colour, perhaps one suggestive of cream-coloured paper: .poem {background-color: oldlace; padding: 10% 15% 10% 15%; font-family: Georgia, Times, "Times New Roman", serif;}

We also want to keep the four verse-lines close together. This is accomplished by manipulating the top- and bottom-margin controls of the <p> element. Remember that in the "margin" shorthand property these are the first and third of the four sides in clockwise order: P {margin: 0em 0em 0.2em 0em;} (You could also write P {margin-top: 0em; margin-bottom: 0.2em}.) It is customary to keep the top margin to zero in such cases, because the top of a text might later have to be aligned with an image or a table. As you are only publishing poetry here, that is hardly likely, but stick to the conventions and you'll find your code easier to work with later.

Finally, you'll want to check that any notes you write, and the heading too, have had styles declared for them also. Take a fresh a look at the example so styled. Remember to View ... Source.

1 2 3 4 5 6 7 8 9

Examples: • SimpleWrappingRhymeSonnetCadenceCascadeStanzasCaesura

Creative Commons License Piggin.Net Macro-Typography by Jean-Baptiste Piggin is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.