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>
</DIV>
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.
Examples: • Simple • Wrapping • Rhyme • Sonnet • Cadence • Cascade • Stanzas • Caesura
Piggin.Net Macro-Typography
by Jean-Baptiste
Piggin is licensed under a Creative
Commons Attribution-ShareAlike 4.0 International License.