Re: CSS for poetry?

In article <XChRa.79144$ye4.53054@sccrnsc01>, Brian
<brian (AT) wfcr (DOT) org.invalid-remove-this-part> wrote:

Rob Stevenson wrote:
I was wondering if anyone has worked out clever
bits of CSS to help lay out poems on the web.

I'm particularly interested in using outdents, indents (at 3 different
levels), and having line wrapping occur to the right of the stanza left
border. As well, there's an occasional need for a large indent on the
first line of a partial poem under discussion.

And, of course, I'd like to do all this without having to SPAN every
line, which seems to be what I'm doing now.

How are you marking up the poems? A url would be nice. You could use
br>, but I think span around each line is correct, or possibly div.
I can think of solutions if you're willing to go this route.

For starters, a hanging indent is accomplished by setting a
margin-left, and a negative text-indent.

If you don't want to use span or div, I'll leave your question for
someone else.

Hi Brian,

I've included my CSS below for reference. An example of the result can
be seen at...

www.jottings.ca/john/voices/pow_style.html or reservoir.html

I can and do use divs and spans of course, but I was hoping for a
little magic I guess. Kind of like getting the CSS3 facilities in CSS2
with some fancy footwork. ;-)

My major stumbling block at the moment is an apparent inability to get
browsers to display other than default top and bottom margins for
blockquote, which I use a lot since the pages in question are
commenting on quoted poems.

Rob

Here's what I've got so far...

/* Created by RS Mar-July/03 for jottings.ca */

/* left border of the poem is indented 5.0em from the body text */
/* lines can then be outdented or indented as needed using the various*/
/* indents below in P (for verses) or SPAN (for lines) tags */
/* we do this so line wraps, when they occur, remain indented a little*/

..poem {
text-indent: 0em;
text-align: left;
font-family: "Minion Web","Times New Roman",Georgia,serif;
line-height: 1.2em;
font-size: 1.1em;
margin: 0 0 0 5em;
}

..poem p {
margin-top: 1em;
margin-bottom: 0;
}

..out3 {
margin-left: -3em;
}

..out2 {
margin-left: -2em;
}

..out1 {
margin-left: -1em;
}

/* for no indent, don't use a SPAN at all */

..ind1 {
margin-left: 1em;
}

..ind2 {
margin-left: 2em;
}

..ind3 {
margin-left: 3em;
}

..halfline {
margin-left: 10em;
}