Inserting Spaces according to sigil messes with font

[rosshalde]

Ok, so I was having trouble with blank spaces and then I found some code to try and it worked.
I inserted
<div class="body" style="white-space:normal">
rather than
<div class="body" style="white-spacere-wrap">
and it did get rid of all the "white space"
Now I need to add back a few to set off prose text from a brief little song and then back to prose.
Essentially, I want a blank line above and below the song that is in the midst of prose to help offset it and make it look nice.

Sigil suggests

Don’t. Its much better to use stylesheets to define the amount of space above or below your special sections using a style definition. For instance to leave 1.5 lines of space above a paragraph you can use this style class:

p.blankabove { margin-top: 1.5em; }
and in your text use the class with your paragraph:

<p class="blankabove">My paragraph</p>
which I did and it works, but now the text of that paragraph is much larger than the text of all other paragraphs.....why is that?

I can always add a space in the book view, but it adds
<br />
and I can see from my reading this forum that might not be a good idea.

any pointers?
Thanks in advance.

[theducks]

Originally Posted by rosshalde

Ok, so I was having trouble with blank spaces and then I found some code to try and it worked.
I inserted
<div class="body" style="white-space:normal">
rather than
<div class="body" style="white-spacere-wrap">
and it did get rid of all the "white space"
Now I need to add back a few to set off prose text from a brief little song and then back to prose.
Essentially, I want a blank line above and below the song that is in the midst of prose to help offset it and make it look nice.

Sigil suggests

Don’t. Its much better to use stylesheets to define the amount of space above or below your special sections using a style definition. For instance to leave 1.5 lines of space above a paragraph you can use this style class:

p.blankabove { margin-top: 1.5em; }
and in your text use the class with your paragraph:

<p class="blankabove">My paragraph</p>
which I did and it works, but now the text of that paragraph is much larger than the text of all other paragraphs.....why is that?

I can always add a space in the book view, but it adds
<br />
and I can see from my reading this forum that might not be a good idea.

any pointers?
Thanks in advance.

Look at the code.
Sigil has some bad habits. If you try and join 2 paragraphs from Book View (It adds a Style= that results in bigger text ). IMHO do the join in code view by removing from the </p to the > before the first character to be seen (add a space when needed)

[BetterRed]

@rosshalde - I make no claims as to having any expertise on this stuff.

But, if I had your 'problems' I would open the epub in the calibre ebook editor. It has a Live CSS feature that will display all the styling applied to a paragraph, division etc. Styling of a given chunk of HTML (such as paragraph) will typically be inherited (cascade) from multiple chunks within the style sheet(s).

I don't know if Sigil has a similar feature, I've not stumbled across it.

BR

[Toxaris]

You could place the song in a blockquote, that is what I would do.

[rosshalde]

how do i do the block quote thing?

[Toxaris]

Simple. Just put the paragraphs you want in blockquote tags. So, something like this:

<blockquote>
<p>First line of the song</p>
...
<p>Last line of the song</p>
</blockquote>

[st_albert]

Originally Posted by Toxaris

Simple. Just put the paragraphs you want in blockquote tags. So, something like this:

<blockquote>
<p>First line of the song</p>
...
<p>Last line of the song</p>
</blockquote>

and then you define blockquote in your .css file however you want the overall song to look. If I were you, I'd have not only a top and bottom margin, but also a left and right margin to further set off the block. So the entry in the .css file might look like this:

blockquote {
   /* adjust the values to your taste.  Stay with units of em or % for best results */
   margin-top=0.5em;
   margin-bottom=0.5em;
   margin-left=3.0em;
   margin-right=3.0em;
   /* put other formatting stuff here +/
}

Play around with it, and see what it does. That's how most of us learned!

Hth
Albert

[phossler]

@st_albert -- small typo but so we don't confuse anyone --- the = in the css should be a : of course (or least I need to do that)

I would define a blockquote class for songs, so that I could apply it only where specifically needed

blockquote.song {
   margin-top: 1.5em;
   margin-bottom: 1.5em;
   margin-left: 4.0em;
   margin-right: 4.0em;
   font-style: italic;
}

blockquote {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   margin-left: 3.0em;
   margin-right: 3.0em;
}

Personal style / opinion

[st_albert]

Originally Posted by phossler

@st_albert -- small typo but so we don't confuse anyone --- the = in the css should be a : of course (or least I need to do that)

Thanks, Paul! Good catch.

Albert