setting line-height between paragraphs of poetry in epubs

[Derek R]

I am using the following code for poems in epubs:

.poem {
	margin: 1em;
       }
.poem p {
	margin: 0 0 0 2em; 
	text-indent: -2em; 
	padding: 0;
	}
.poem p.stanza {
    margin-top: 1em !important;
    }

This works fine, but the spacing between the paragraphs in the poem is less than the space between lines within regular paragraphs. I can certainly adjust the line-height in the poem by setting a "line-height", but what I would like to do is let it inherit whatever the default line-height is in the reading device.

Is there any way making the line-heights the same without setting them both within the epub?

[JSWolf]

Your solution might be...

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

[Derek R]

Apologies, I have just fixed this by adding "line-height: inherit;" to the .poem class.

[JSWolf]

See my reply above.

[Derek R]

Yes, that works - thank you. However, how would I separate two poems running one after the other if the top and bottom margins are both 0? Here is the example I am talking about:

<div class="poem">
    <p>In her high, bright noontide</p>

    <p>The shadows fell upon . .</p>

    <p><b>ETHNA CARBERY</b> . . .</p>

    <p>At Easter, 1902 . . . .</p>
  </div>

  <div class="poem">
    <p><b>TO YOU IN HEAVEN</b>&mdash;</p>

    <p class="stanza">When your head once lay on my breast,</p>

    <p>And your hand was closed in my hand,</p>

    <p>You drew back the veil from your soul</p>

    <p>And asked could I understand.</p>

    <p class="stanza">The letters that flamed in gold flame</p>

    <p>On its virgin whiteness I scanned&mdash;</p>

    <p>"I love you, I love you, O Love"&mdash;</p>

    <p>And I whispered, I understand.</p>

    <p class="stanza">I thought I did. Foolish we be!</p>

    <p>I, in Sorrow's intense solitude</p>

    <p>Where the dread hours drag into ages,</p>

    <p>Fared far ere I understood.</p>

    <p class="stanza">Yesternight I lifted wet eyes</p>

    <p>To the stars, that were as the sands,</p>

    <p>And cried, O, my God! it is now,</p>

    <p>Only now, that my soul understands.</p>

    <p class="stanza">SEUMAS.</p>
  </div>

[JSWolf]

Try this...

p {
margin-top: 0;
margin-bottom: 0;
margin-left: 1em;
margin-right: 1em
}

[Derek R]

Ah! Yes, that's it. Thank you. Funnily enough I thought I'd already tried that, without success, but I must have had something wrong somewhere. Your help is much appreciated.

[Jellby]

It could be argued that lines in a poem should not be coded as <p>, but maybe as <div> or <span> (with appropriate class and styling). Nowadays, I also prefer to have a separate <div> for each stanza:

<div class="poem">
 <div class="stanza">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
 </div>
 <div class="stanza">
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
  <div class="line"></div>
 </div>
</div>

and of course, titles and signatures will have their own <div class="title"> and <div class="signature">.

[JSWolf]

If it was me doing it, I'd use a blockquote.

<blockquote>
  <p>Line</p>
  <p>Line</p>
  <p>Line</p>
  <p>Line</p>
</blockquote>
<blockquote>
  <p>Line</p>
  <p>Line</p>
  <p>Line</p>
  <p>Line</p>
</blockquote>

You can change the margins for a blockquote like so...

blockquote {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 2em;
margin-right: 2em
}

[AlexBell]

Originally Posted by JSWolf

If it was me doing it, I'd use a blockquote.

But how then do you manage long lines - lines longer than the width of an ebook screen? These lines will break at places governed by the font size (and family), and the usual convention in print or ebook is to have them indented where they break. I've done poetry ebooks in which some of the damn poem titles are longer than will fit on an ebook line. And one of the poems has a long stanza in which the lines are progressively indented further and further until the line starts nearly at the right margin.

And many poems have lines which for some poetic reason are indented several spaces - and the exact distance is important to the poet. I can't see how this could be done with blockquote tags.

[Jellby]

Originally Posted by AlexBell

But how then do you manage long lines

It's just the same, you can have <blockquote class="poem"> and a combination of margin and negative indet for "blockquote.poem p" (or "blockquote.poem div.line"). <blockquote> is just a <div> with some pre-defined semantics (which may be OK for poems) and some default style (which you'll probably override anyway).

And many poems have lines which for some poetic reason are indented several spaces - and the exact distance is important to the poet. I can't see how this could be done with blockquote tags.

...or with any other kind of tag. And what if the indent space needed is longer than the screen width? I couldn't find a satisfactory solution. I'd use "visibility: hidden", but the visibility property is not required in ePub readers. I could also use white text, but there's no guarantee that the background is white, and it would be read by a text-to-speech function.

[Derek R]

I don't know whether this helps AlexBell, or is exactly what you mean (?), but the code that I use on my website for formatting poetry with indented lines (and hanging indents) is this:

.poem {
margin: 1em 0 0 1em;
}
.poem p {margin: 0 0 0 2em; text-indent: -2em; padding: 0;}
.poem p.stanza   {margin-top: 1em !important;}
.poem p.indent1  {margin-left: 3em !important;}
.poem p.indent2  {margin-left: 3.5em !important;}
.poem p.indent3  {margin-left: 4em !important;}

This allows you to have progressively indented lines and creates hanging indents when the lines wrap.

I can't remember where I got this code, probably some kind soul on this forum, and my background certainly isn't in this field, but it works for me. If there is an intrinsic problem with it I'm sure that someone who actually knows what he/she is talking about will put you right.

[AlexBell]

Thanks to you all. You've given me things to think about.