CSS Cookbook/Poetry

From DPWiki
Jump to navigation Jump to search


The issue of how to encode poetry as styled HTML has been debated at great length, depth, and volume in the PGDP forums and an uncertain consensus has emerged. Here is a poem with HTML as marked by Guiguts, and with the addition of a heading and a citation.

<div class="poem" style="background-color:#Ede">
  <div class="stanza">
    <span class="i0">I wandered lonely as a clod,</span><br />
    <span class="i2">Picking up old rags and bottles,</span><br />
    <span class="i0">When onward on my daily plod</span><br />
    <span class="i2">I came upon some axolotls</span><br />
    <span class="i0">Beside the lake, beneath the trees,</span><br />
    <span class="i2">A sight to make a man's blood freeze.</span><br />
  <div class="stanza">
    <span class="i0">Some had handles, some were plain&mdash;</span><br />
    <span class="i2">Skins green and orange, in the main.</span><br />
    <span class="i0">My hair stood up, my blood ran cold.</span><br />
    <span class="i2">I fled with fear upon my soul.</span><br />
    <span class="i0">I find  my solace now in bottles,</span><br />
    <span class="i2">and I forget them axolotls.</span><br />
  <p class="citation">&mdash;Alfred E. Neuman
I wandered lonely as a clod,
        Picking up old rags and bottles,
When onward on my daily plod
        I came upon some axolotls
Beside the lake, beneath the trees,
        A sight to make a man's blood freeze.
Some had handles, some were plain—
        Skins green and orange, in the main.
My hair stood up, my blood ran cold.
        I fled with fear upon my soul.
I find my solace now in bottles,
        and I forget them axolotls.
    —Alfred E. Neuman

Let's look at the Cookbook styles that are being called upon.

Poem Div

The poem as a whole, including any title, citation, and stanza numerals, is enclosed in <div class="poem">.

div.poem { /* inset poem 5% on each side */
	text-align:left;     /* make sure no justification attempted */
	margin-left:5%;	     /* 5% from the left */
	width:90%;           /* 5% from the right, & fix IE6 abs.pos. bug */
	position: relative;  /* container for .linenum positions */

The CSS rule sets the margins for the poem. We use the commands margin-left:5%; width:90% to set these margins. It would be more common to use margin-right instead of width, but use of the latter avoids a problem; see this discussion.

Enclosing a poem this way lets us style all the enclosed elements independently of the rest of the document.

Poem Title

The poem's title is marked <h4>. The CSS rule headed .poem h4 sets the look of such headings.

.poem h4 { /* title of poem above text */
	 margin-left: 5em;	/* indented within poem, or.. */
	/* text-align: center;	   centered within poem? */
	/* font-style: italic;	   other optionals: italic? */
	 font-weight: normal;	/* ..light variant? */
	 text-decoration: underline;/* ..underlined? */

It selects only level-4 heads contained inside div.poem; other uses of h4 are unaffected. A variety of styling suggestions are shown. Set the style to match your book.

Stanza Numbers

In some long poems, stanzas are preceded by a stanza number, typically a roman numeral on a line by itself, and typically centered over the lines of the stanza. To style such numbers you can enclose them in <h5>..</h5> and place them between the stanza divs.

You would write a CSS rule with the selector .poem h5 to style them. Such a rule might include text-align:center;—on the other hand, centering a single roman numeral in the width of the page might push it far to the right of the visual centerline of the poem, in which case it might instead be left-aligned and given a healthy left margin.


Each stanza is enclosed in a <div class="stanza"> (even if there is only one stanza).

.poem .stanza {		/* set vertical space between stanzas */
	margin-top: 1em;

The CSS rule sets the vertical space between one stanza and the next. It also allows styling elements inside the stanza in a unique way.

Line Markup

The lines of the example poem above are marked as Guiguts generates it. The text of each line is enclosed thus:
<span class="in">Text of the line</span><br />

This code was designed to display properly in both modern and non-CSS browsers. The CSS rules are written in a convoluted way to make this happen.

.stanza span,	/* each line as generated by Guiguts.. */
.stanza div,	/* ..and as could be marked in div.. */
.stanza p	/* ..or p */
	display:block;		/* make span act like div */
	line-height: 1.2em;	/* set spacing between lines in stanza */
	margin-left: 2em;	/* set up 2em indent for continuation..*/
	text-indent: -2em;	/* ..of folded lines */
	margin-top: 0;
.stanza br { /* br's generated by Guiguts ignored by CSS browsers */
	display: none; /* Lynx doesn't see this, so executes br */

The property display:block means "line break before and after." It's the default for paragraphs and divs. But the rule .stanza span applies it to <span> markup as well, when it appears inside a stanza. Any modern browser will treat the <span>..</span> markup around each line as if it were <div>..</div> or <p>..</p>.

What's the point? The Lynx browser doesn't recognize either CSS styles or <span>..</span> markup; it just ignores them. As Lynx displays the line text, it reaches the end of the line, finds the <br /> markup (which it does support), and goes to a new line. Thus Lynx or another ASCII-based browser will display the lines of a stanza correctly, one per line. When it hits the end of a <div> it inserts an extra blank line. So a poem looks reasonably readable in Lynx.

When a CSS-aware browser (all of them from Netscape 4 on) processes the stanza, it treats the span as a paragraph (because of display:block), and it ignores the <br /> at the end because of the rule .stanza br {display: none;}. Thus the modern browser displays the lines of a stanza correctly, one per line, and inserts some vertical space between stanzas as directed.

The advantage of this markup is that it works in non-CSS browsers, which is an important point to PG. The disadvantage is that the source code is ugly to look at and more voluminous than, say, marking each line as a <p>..</p> (eleven more characters per line, in fact). Unfortunately, Lynx is just smart enough to insert an extra linespace when it sees <p>. If a poem is marked up with each line in <p>..</p>, Lynx will double-space the lines of a stanza: half as many lines on a terminal screen and no visual mark of the end of a stanza.

Line Margin

Browser differences apart, the rule headed .stanza span controls the basic appearance of each line in the poem. The line-height property sets the vertical spacing within the stanza (margin-top should be left at 0).

The margin-left and text-indent properties control what happens if a long line of poetry has to be folded in a narrow browser window. The 2em margin insets the line, but the negative-2em text "indent" pulls it back out to the poem margin. Thus as long as there is a single line, the result is the same as if both properties were 0. However, when the poem line has to be folded into multiple screen lines, the overflow lines respect the margin, and are indented 2em under the first word. This makes it clear where the poet's line begins and ends.

Indented Lines

Un-indented lines are assigned to the class i0. Indented lines have classes i1, i2, etc. The style definitions for these classes set left-indents of a number of em's to match the class name.

.poem .i0 {display:block; margin-left: 2em;}	/* default (non-indented) line */
.poem .i1 {display:block; margin-left: 3em;}	/* indents: delete unused ones */
.poem .i2 {display:block; margin-left: 4em;}
.poem .i9 {display:block; margin-left: 11em;}

Guiguts generates these class names based on the number of ASCII spaces used to indent the lines, adding one em of indent for each two ASCII spaces.

Visible Line Numbers

Long poems and poetic drama sometimes show line numbers every 10 lines. Proofers leave these numbers in; and guiguts has support for moving them to the right margin in the ASCII etext. When generating HTML, guiguts marks up each line number as <span class="linenum">nn</span>. The CSS rule for this class is:

.poem .linenum { /* poem line numbers */
  /* the following locate the line numbers horizontally */
    position: absolute;	/* positioned out of text flow */
  /*left: -2.5em; 		   ..in the LEFT margin, or.. */
    right: -2em;		/* ..in the RIGHT margin */
  /* the following determine the look of the numbers */
    margin: 0;
    font-size: 90%;		/* they are smaller */
    text-align: center;	/* centered in a space... */
    width: 1.75em;		/* ...about 3+ digits wide */
    color: #777; background-color: #ddd; /* dark gray on light gray or */
    /* color: #fff; background-color: #888;  ..white on medium gray */

The first part of this uses absolute positioning to take the nn out of its position at the end of the line of the poem, and position it out in the right margin—or, out in the left margin. Either works; try the look of each.

The remaining declarations set the appearance of the number. Different possibilities are shown; for example, the number can be rendered as white numerals on a dark-gray patch.

CSS Cookbook Topics
Intro  • Styles   • Browser Issues   • About   • Reference
Styling  • Basic Text   • Heads   • Lists   • Tables
 • Block Quotes   • TOC and Index   • Images   • Poetry
 • Sidenotes   • Drama   • Footnotes   • Page Numbers