Managing Blank Lines Following <p> Using CSS

SeaCanary · 01-29-2014, 01:06 PM

Is there a "better" way to achieve the result I'm getting using only CSS?

This is the result I'm getting:

Quote:

Now Boney's away from his warring and fighting,
He has gone to a place, where there is naught can delight him,
He may sit there & dwell, on the glories he has seen oh,
While forlorn he will mourn, on the Isle of Saint Helena.

No more in Saint Cloud, will he appear in great splendour,
Nor come forth from the crowd, like the great Alexander,

Using this code:

Code:

  <p class="versebody">Now Boney's away from his warring and fighting,</p>
  <p class="versebody">He has gone to a place, where there is naught can delight him,</p>
  <p class="versebody">He may sit there &amp; dwell, on the glories he has seen oh,</p>
  <p class="verseend">While forlorn he will mourn, on the Isle of Saint Helena.</p>

  <p class="versebody">No more in Saint Cloud, will he appear in great splendour,</p>
  <p class="versebody">Nor come forth from the crowd, like the great Alexander,</p>

And these CSS classes:

Code:

.versebody {
    display: block;
    margin-bottom: 0em;
    margin-left: 1em;
    text-indent:-1em;
    margin-right: 0;
    margin-top: 0em
    }
.verseend {
    display: block;
    margin-bottom: 1em;
    margin-left: 1em;
    text-indent:-1em;
    margin-top: 0em
    }

Is there a "better" way to achieve the result I'm getting using only CSS?

RbnJrg · 01-29-2014, 01:47 PM

Quote:

Originally Posted by SeaCanary

Is there a "better" way to achieve the result I'm getting using only CSS?

Maybe you could use in your .html file:

Code:

<p class="verse">Now Boney's away from his warring and fighting,<br />
He has gone to a place, where there is naught can delight him,<br />
He may sit there &amp; dwell, on the glories he has seen oh,<br />
While forlorn he will mourn, on the Isle of Saint Helena.</p>

<p class="verse">No more in Saint Cloud, will he appear in great splendour,<br />
Nor come forth from the crowd, like the great Alexander,</p>

And in your css stylesheet:

Code:

p.verse {
    margin: 0 0 1em 0;
    text-indent: 0;
}

Regards
Rubén

DiapDealer · 01-29-2014, 01:53 PM

Margin-bottom on the last verse or margin-top on the first verse. Those are pretty-much your options.

Jellby · 01-29-2014, 02:12 PM

I'd rather:

Code:

<div class="poetry">
 <div class="stanza">
  <div class="line">Now Boney's away from his warring and fighting,</div>
  <div class="line">He has gone to a place, where there is naught can delight him,</div>
  <div class="line">He may sit there &amp; dwell, on the glories he has seen oh,</div>
  <div class="line">While forlorn he will mourn, on the Isle of Saint Helena.</div>
 </div>

 <div class="stanza">
  <div class="line">No more in Saint Cloud, will he appear in great splendour,</div>
  <div class="line">Nor come forth from the crowd, like the great Alexander,</div>
 </div>
</div>

Using containers lets you use more selectors, and it's easier to control the spacing between verses and normal text, for instance. Using <div> instead of <p> for the individual lines is a matter of taste, because the lines are not actually paragraphs; it also degrades more gracefully if CSS is not completely/correctly supported, and does not force you to override margins/indents from normal paragraphs.

For the margin/negative indent of the verses, I'd use a larger value, to make it more evident when verses are broken, and avoid confusion with other poetry indent.

As for the actual separation between stanzas, I use margin-top:0.5em in div.stanza.

Jellby · 01-29-2014, 02:16 PM

Quote:

Originally Posted by RbnJrg

Maybe you could use in your .html file:

Code:

<p class="verse">Now Boney's away from his warring and fighting,<br />
He has gone to a place, where there is naught can delight him,<br />

That does not work nicely when the lines are too long for the screen. I mean, you don't get any indication (except for the capital letter, in English) that a line was broken, and not originally a verse line. That's why we use a combination of left margin and negative indent, and wrap each line in an individual element.

SeaCanary · 01-29-2014, 07:03 PM

Quote:

Originally Posted by RbnJrg

Maybe you could use in your .html file:

Code:

<p class="verse">Now Boney's away from his warring and fighting,<br />
He has gone to a place, where there is naught can delight him,<br />
He may sit there &amp; dwell, on the glories he has seen oh,<br />
While forlorn he will mourn, on the Isle of Saint Helena.</p>

<p class="verse">No more in Saint Cloud, will he appear in great splendour,<br />
Nor come forth from the crowd, like the great Alexander,</p>

<snip>

Thank you for suggesting this, but I thought we (or at least me as a noob) are discouraged from using <br /> and encouraged to use only CSS. Also it doesn't work when the lines are too long for the screen. That's why I constructed the

Code:

left-indent:-1em;

in the original CSS example I provided. I'm sorry that I did not make that more plain. In my effort to be concise I achieved obscurity.

SeaCanary · 01-29-2014, 11:51 PM

Quote:

Originally Posted by Jellby

I'd rather:

Code:

<div class="poetry">
 <div class="stanza">
  <div class="line">Now Boney's away from his warring and fighting,</div>
  <div class="line">He has gone to a place, where there is naught can delight him,</div>
  <div class="line">He may sit there &amp; dwell, on the glories he has seen oh,</div>
  <div class="line">While forlorn he will mourn, on the Isle of Saint Helena.</div>
 </div>

 <div class="stanza">
  <div class="line">No more in Saint Cloud, will he appear in great splendour,</div>
  <div class="line">Nor come forth from the crowd, like the great Alexander,</div>
 </div>
</div>

Using containers lets you use more selectors, and it's easier to control the spacing between verses and normal text, for instance. Using <div> instead of <p> for the individual lines is a matter of taste, because the lines are not actually paragraphs; it also degrades more gracefully if CSS is not completely/correctly supported, and does not force you to override margins/indents from normal paragraphs.

For the margin/negative indent of the verses, I'd use a larger value, to make it more evident when verses are broken, and avoid confusion with other poetry indent.

As for the actual separation between stanzas, I use margin-top:0.5em in div.stanza.

I like this though I found a way to simplify the code.

HTML code Note how I nested one <div> within another as you suggested.

Code:

<div class="verse">
  <div class="line">
    <p>Now Boney's away from his warring and fighting,</p>
    <p>He has gone to a place, where there is naught can delight him,</p>
    <p>He may sit there &amp; dwell, on the glories he has seen oh,</p>
    <p>While forlorn he will mourn, on the Isle of Saint Helena.</p>
  </div>
</div>

<div class="verse">
  <div class="line">
    <p>No more in Saint Cloud, will he appear in great splendour,</p>
    <p>Nor come forth from the crowd, like the great Alexander,</p>
    <p>He may look toward the East, while he thinks upon Lucana,</p>
    <p>While his heart is full of woe, on the Isle of Saint Helena.</p>
  </div>
</div>

CSS code The second declaration defines the properties of paragraphs that are inside a class “line” division. (I took your suggestion to decrease the margin-bottom value to 0.5em.)

Code:

.verse {
    display: block;
    margin-bottom: 0.5em;
    margin-left: .5em;
    text-indent:-1em;
    margin-right: 0;
    margin-top: 0em
    }
.line p {
    display: block;
    margin-bottom: 0em;
    margin-left: .5em;
    text-indent:-1em;
    margin-right: 0;
    margin-top: 0em
    }

Thanks everyone!

Bonus
The isle of St. Helena, song / Stuart Carolan, singing in English

Jellby · 01-30-2014, 03:50 AM

In your current example, the <div class="line"> is unneeded, you could have ".verse p" instead. (I use "poetry" and "stanza" to independently set spacing between stanzas and between poems and normal text.)

And to further simplify, you could discard the "display: block", that's default for <div> and <p> anyway, and use the shortcut notation for margins: "margin: 0; margin-left: 1em". Why did you split the margin-left between ".verse" and ".line p"?

Code:

.verse {
    margin-bottom: 0.5em;
    }
.verse p {
    margin: 0;
    margin-left: 1em;
    text-indent: -1em;
    }

SeaCanary · 01-30-2014, 09:09 AM

Quote:

Originally Posted by Jellby

In your current example, the <div class="line"> is unneeded, you could have ".verse p" instead. (I use "poetry" and "stanza" to independently set spacing between stanzas and between poems and normal text.)

I see what you mean. In this file I don't have any regular text. I changed it to the following.

Code:

  <div class="verse">
    <p>Ease the bowspring,</p>
    <p>Gently set the foresheets on the windward side.</p>
    <p>Let go fore and aft &amp; as she turns,</p>
    <p>Sail her full &amp; by to catch the evening tide.</p>
  </div>

  <div class="verse">
    <p>Shake out your topsails,</p>
    <p>Feel the seas roll under that she knows so well.</p>
    <p>Find a star to guide her to the dawn,</p>
    <p>And then let her greet the long Atlantic swell.</p>
  </div>

  <div class="chorus">
    <p>cho: Sing me a shanty</p>
    <p>Cantar del Cabo San Vicente</p>
    <p>Chantez des marins de Nile</p>
    <p>Sing a hymn of Trafalgar</p>
  </div>

Quote:

Originally Posted by Jellby

And to further simplify, you could discard the "display: block", that's default for <div> and <p> anyway...

Quote:

Originally Posted by Jellby

...and use the shortcut notation for margins: "margin: 0; margin-left: 1em".

Quote:

Originally Posted by Jellby

Why did you split the margin-left between ".verse" and ".line p"?

Code:

.verse {
    margin-bottom: 0.5em;
    }
.verse p {
    margin: 0;
    margin-left: 1em;
    text-indent: -1em;
    }

It was a mistake as your question pointed out in the politest way possible. My revised code looks like this...

Code:

.verse {
    margin-bottom: 0.5em;
    }
.verse p {
    margin-bottom: 0;
    margin-left: 1em;
    text-indent:-1em;
    margin-right: 0;
    margin-top: 0em
    }
.chorus {
    margin-bottom: 0.5em;
	}
.chorus p {
    margin-bottom: 0;
    margin-left: 2em;
    text-indent:-1em;
    margin-right: 0;
    margin-top: 0em
    }

...in order to put half a blank line at the bottom of the verse and the chorus, and in order to indent the second line of a line that "wraps", and in order to indent the chorus to make it different from the verses.

What do you think?

Jellby · 01-30-2014, 10:44 AM

Perfect. You just may need to adjust things slightly, depending on each poem/song layout (this one has a chorus that's indented, another one may have alternating indents, or a different pattern).

I'm not sure you understand my point about shortcut margins. I suggested:

Code:

margin: 0;
margin-left: 1em;

Note: "margin", not "margin-bottom". The idea is then you don't need "margin-right" and "margin-top". You could have a single "margin: 0 0 0 1em" too, but that's not so readable when/if you just want to change the left margin.

If you want to be even smarter:

Code:

<div class="verse">
<p>...
<p>...
</div>

<div class="verse chorus">
<p>...
<p>...
</div>

Now the "chorus" is a "verse" too, so you don't need to repeat stuff:

Code:

.verse {
    margin-bottom: 0.5em;
    }
.verse p {
    margin: 0;
    margin-left: 1em;
    text-indent:-1em;
    }
.chorus p {
    margin-left: 2em;
    }

GeorgeH · 01-30-2014, 11:15 AM

Thought I'd throw my way of doing this into the ring

I use Word 2007 and then Calibre to convert to epub. The example below shows how it's done using that method.

The underscores in the quote are meant to represent leading indents. Although not seen in the quote, each line also has a hanging indent.

Quote:

Now Boney's away from his warring and fighting,
__He has gone to a place, where there is naught can delight him,
He may sit there & dwell, on the glories he has seen oh,
__While forlorn he will mourn, on the Isle of Saint Helena.

__No more in Saint Cloud, will he appear in great splendour,
__Nor come forth from the crowd, like the great Alexander,

Using this:

.verse1 {
display: block;
text-indent: -21.3pt;
padding: 0;
margin: 0 0 6pt 35.5pt
}
.verse2 {
display: block;
text-indent: -21.3pt;
padding: 0;
margin: 0 0 6pt 49.7pt
}
.verse3 {
display: block;
text-indent: -21.3pt;
padding: 0;
margin: 0 0 12pt 49.7pt
}

<p class="verse1">Now Boney's away from his warring and fighting,</p>
<p class="verse2">He has gone to a place, where there is naught can delight him,</p>
<p class="verse1">He may sit there & dwell, on the glories he has seen oh,</p>
<p class="verse3">While forlorn he will mourn, on the Isle of Saint Helena.</p>
<p class="verse2">No more in Saint Cloud, will he appear in great splendour,</p>
<p class="verse2">Nor come forth from the crowd, like the great Alexander,</p>

SeaCanary · 01-31-2014, 08:43 AM

Quote:

Originally Posted by Jellby

<snip>

If you want to be even smarter:

Code:

<div class="verse">
<p>...
<p>...
</div>

<div class="verse chorus">
<p>...
<p>...
</div>

Now the "chorus" is a "verse" too, so you don't need to repeat stuff:

Code:

.verse {
    margin-bottom: 0.5em;
    }
.verse p {
    margin: 0;
    margin-left: 1em;
    text-indent:-1em;
    }
.chorus p {
    margin-left: 2em;
    }

When I tried this I found that every verse and chorus line had a blank line before and after it. I even built a new file with just this CSS code and some dummy verse and chorus lines and got the same result.

But this worked. (No changes here. I'm just including it for completeness.)

Code:

  <div class="verse">
    <p>Oh dear! We're goin' to be late,</p>
    <p>Gaffer is stood at the gate.</p>
    <p>We're out o' pocket,</p>
    <p>Our wages he'll dockit,</p>
    <p>We'll have to buy grub on the slate.</p>
  </div>

  <div class="verse chorus">
    <p>cho: Poverty poverty knock, my loom is-a saying all day,</p>
    <p>Poverty poverty knock, Gaffer's too skinny to pay,</p>
    <p>Poverty poverty knock, always one eye on the clock,</p>
    <p>I know I can guttle when I hear me shuttle go,</p>
    <p>Poverty poverty knock.</p>
  </div>

And here's how I changed the CSS code:

Code:

.verse {
    margin-bottom: 0.5em;
    }
.verse p {
    margin:0 0 0 1em;
    text-indent:-1em;
    }
.chorus p {
    margin:0 0 0 2em;
    }

What am I doing wrong?

Jellby · 01-31-2014, 02:11 PM

Quote:

Originally Posted by SeaCanary

Code:

.verse {
    margin-bottom: 0.5em;
    }
.verse p {
    margin:0 0 0 1em;
    text-indent:-1em;
    }
.chorus p {
    margin:0 0 0 2em;
    }

What am I doing wrong?

I think it may be a matter of precedence/priority. You may have set a default bottom/top margin for <p> elsewhere, or the renderer you are using may have such a hidden deffinition. What happens then is that an explicit "margin-top", or the corresponding value in the 4-valued "margin" property takes precedence over the 1-valued "margin".

cybmole · 01-31-2014, 03:29 PM

or there is a typo higher up in CSS, so those changed commands are being ignored.

some renderers ignore everything after a syntax error has occurred, others are more tolerant.

SeaCanary · 01-31-2014, 05:25 PM

Quote:

Originally Posted by cybmole

or there is a typo higher up in CSS, so those changed commands are being ignored.

some renderers ignore everything after a syntax error has occurred, others are more tolerant.

Not possible because I built a new file with just the CSS code I showed you and some dummy verse and chorus lines and got the same result. There are no definitions in the XHTML file. (FWIW I'm using Sigil v0.7.4)

01-29-2014, 02:12 PM	#4
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	I'd rather: Code: <div class="poetry"> <div class="stanza"> <div class="line">Now Boney's away from his warring and fighting,</div> <div class="line">He has gone to a place, where there is naught can delight him,</div> <div class="line">He may sit there & dwell, on the glories he has seen oh,</div> <div class="line">While forlorn he will mourn, on the Isle of Saint Helena.</div> </div> <div class="stanza"> <div class="line">No more in Saint Cloud, will he appear in great splendour,</div> <div class="line">Nor come forth from the crowd, like the great Alexander,</div> </div> </div> Using containers lets you use more selectors, and it's easier to control the spacing between verses and normal text, for instance. Using <div> instead of <p> for the individual lines is a matter of taste, because the lines are not actually paragraphs; it also degrades more gracefully if CSS is not completely/correctly supported, and does not force you to override margins/indents from normal paragraphs. For the margin/negative indent of the verses, I'd use a larger value, to make it more evident when verses are broken, and avoid confusion with other poetry indent. As for the actual separation between stanzas, I use margin-top:0.5em in div.stanza.

01-30-2014, 03:50 AM	#8
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	In your current example, the <div class="line"> is unneeded, you could have ".verse p" instead. (I use "poetry" and "stanza" to independently set spacing between stanzas and between poems and normal text.) And to further simplify, you could discard the "display: block", that's default for <div> and <p> anyway, and use the shortcut notation for margins: "margin: 0; margin-left: 1em". Why did you split the margin-left between ".verse" and ".line p"? Code: .verse { margin-bottom: 0.5em; } .verse p { margin: 0; margin-left: 1em; text-indent: -1em; }

01-30-2014, 10:44 AM	#10
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Perfect. You just may need to adjust things slightly, depending on each poem/song layout (this one has a chorus that's indented, another one may have alternating indents, or a different pattern). I'm not sure you understand my point about shortcut margins. I suggested: Code: margin: 0; margin-left: 1em; Note: "margin", not "margin-bottom". The idea is then you don't need "margin-right" and "margin-top". You could have a single "margin: 0 0 0 1em" too, but that's not so readable when/if you just want to change the left margin. If you want to be even smarter: Code: <div class="verse"> <p>... <p>... </div> <div class="verse chorus"> <p>... <p>... </div> Now the "chorus" is a "verse" too, so you don't need to repeat stuff: Code: .verse { margin-bottom: 0.5em; } .verse p { margin: 0; margin-left: 1em; text-indent:-1em; } .chorus p { margin-left: 2em; }

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Blank Lines In Code	SeaCanary	Sigil	3	01-22-2014 08:51 PM
Streamlining Blank Lines in InDesign	Pumpkin Soup	ePub	14	09-01-2012 08:14 AM
Blank Lines	jreidu	Workshop	2	07-20-2011 05:11 AM
Blank lines between paragraphs?	ascherjim	OpenInkpot	30	12-03-2009 12:19 AM
Blank Lines	vivaldirules	Upload Help	55	03-02-2009 03:17 PM

01-29-2014, 01:53 PM	#3
DiapDealer Grand Sorcerer Posts: 27,547 Karma: 193191846 Join Date: Jan 2010 Device: Nexus 7, Kindle Fire HD	Margin-bottom on the last verse or margin-top on the first verse. Those are pretty-much your options.

01-31-2014, 03:29 PM	#14
cybmole Wizard Posts: 3,720 Karma: 1759970 Join Date: Sep 2010 Device: none	or there is a typo higher up in CSS, so those changed commands are being ignored. some renderers ignore everything after a syntax error has occurred, others are more tolerant.