03-12-2013, 12:51 PM | #1 |
Zealot
Posts: 104
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
|
setting line-height between paragraphs of poetry in epubs
I am using the following code for poems in epubs:
Code:
.poem { margin: 1em; } .poem p { margin: 0 0 0 2em; text-indent: -2em; padding: 0; } .poem p.stanza { margin-top: 1em !important; } Is there any way making the line-heights the same without setting them both within the epub? |
03-12-2013, 01:32 PM | #2 |
Resident Curmudgeon
Posts: 74,027
Karma: 129333114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Your solution might be...
Code:
.poem { margin-top: 0; margin-bottom: 0; margin-left: 1em; margin-right: 1em } |
03-12-2013, 01:33 PM | #3 |
Zealot
Posts: 104
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
|
Apologies, I have just fixed this by adding "line-height: inherit;" to the .poem class.
|
03-12-2013, 01:34 PM | #4 |
Resident Curmudgeon
Posts: 74,027
Karma: 129333114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
See my reply above.
|
03-12-2013, 01:43 PM | #5 |
Zealot
Posts: 104
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
|
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:
Code:
<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>—</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—</p> <p>"I love you, I love you, O Love"—</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> |
03-12-2013, 01:44 PM | #6 |
Resident Curmudgeon
Posts: 74,027
Karma: 129333114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Try this...
Code:
p { margin-top: 0; margin-bottom: 0; margin-left: 1em; margin-right: 1em } Last edited by JSWolf; 03-12-2013 at 02:02 PM. |
03-12-2013, 01:52 PM | #7 |
Zealot
Posts: 104
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
|
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.
|
03-12-2013, 04:26 PM | #8 |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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:
Code:
<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> |
03-12-2013, 04:52 PM | #9 |
Resident Curmudgeon
Posts: 74,027
Karma: 129333114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
If it was me doing it, I'd use a blockquote.
Code:
<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> Code:
blockquote { margin-top: 1em; margin-bottom: 1em; margin-left: 2em; margin-right: 2em } |
03-13-2013, 01:12 AM | #10 |
Wizard
Posts: 3,413
Karma: 13369310
Join Date: May 2008
Location: Launceston, Tasmania
Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet
|
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. |
03-13-2013, 04:03 AM | #11 | |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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).
Quote:
|
|
03-13-2013, 04:42 AM | #12 |
Zealot
Posts: 104
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
|
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:
Code:
.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;} 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. Last edited by Derek R; 03-14-2013 at 08:15 AM. |
03-14-2013, 04:38 AM | #13 |
Wizard
Posts: 3,413
Karma: 13369310
Join Date: May 2008
Location: Launceston, Tasmania
Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet
|
Thanks to you all. You've given me things to think about.
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Line height insanity! | Kamikuza | Conversion | 6 | 10-24-2012 11:56 PM |
Minimum Line Height being ignored for MOBI | yanathin | Conversion | 2 | 10-05-2012 03:24 PM |
Default line-height in epubs | Derek R | ePub | 2 | 02-13-2012 11:23 AM |
Advice about line-height | Julien Pham | Sigil | 2 | 12-22-2011 09:05 AM |
Problems with Line Height Formatting | JohnnyRocks | Conversion | 4 | 02-20-2011 07:10 AM |