Sigil started to throw in blank lines after each paragraph

[Vren]

Hello all!

I've searched for my problem but all I could find were topics with Apple users involved (if I've understood that correctly).

I have transferred my manuscript from Word to Sigil and "built" (more like copy &paste from online styles I found useful) my CSS.

Everything was fine until I started to play with using chat messages - I did a few copy&paste things, deleted them, changend etc.

Then, I noticed, that Sigil would show a blank line after each paragraph which is nothing I can detect in my CSS or HTML. I don't know how to delete them or what to write in CSS so it will delete them.

I have currently 32 chapters with a few more to come. I am very frustrated because I can't use this document with the blank lines.

Also, it seems like Sigil ignores the indents I have put into my CSS. That was not the case before the blank lines appeared.

I have attached a screenshot from my current Sigil Version plus a HMTL / WYSIWYG. I will post my CSS in a second post.

Yellow are the new and unwanted blank lines, red is for the indents that were there and now aren't.

What did I do wrong? Can anyone help me?

[Vren]

My CSS Style Sheet:

/************************************************** ************
Theme Name: meinstil.css
************************************************** ************/

/* Grundeinstellung: Schrift, Größe, Rand und Blocksatz */
body {display: block; font-size: 1em;font-family: 'Arial','Verdana','Times New Roman', sans-serif, serif;margin: 3px; text-align: justify;}

<style type="text/css">
.sizeem {font-size:1em;}
.sizesmall {font-size:small;}
.sizepercentage {font-size:80%;}
</style>

/* <p>TEXT</p> / Text normal, mit Einzug*/
p {font-style: normal; text-indent: 1em; margin: 0}

/* <p class="n">TEXT</p> / Text normal ohne Einzug, linker Rand bündig */
.n {font-style: normal; text-indent: 0em; margin: 0}

/* <p class="ph5-subtitle">TEXT</p> / Text rechtsbündig, klein (font-weight: 500) */
.ph5-subtitle {font-style: normal;font-weight: 500;text-align: right;}

/* Überschriften */
h1 {font-style: normal;font-weight: 900;text-align: center;}
h2 {font-style: normal;font-weight: 800;text-align: center;}

/* CHAT VERSION 2 für links */
/* <p class="chat-message-left">TEXT</p> / Chatnachricht */
p.chat-message-left{
width: 60%; /* Eine Chatbox ist 60% des Displays groß */
margin: .1em;
margin-left: 5%; /* Links Position bei 5% - Die linke Chatbox von 5% bis 65% des Displays */
padding: .4em .6em; /* Leichte Box-Anmutung mit etwas abgedunkelten Hintergrund */
background: #DDD;
font-size: 15px;
color: #333;
border: inset; /* Rahmen links + oben */
font-family: Calibri, Helvetica, sans-serif;
}

/* CHAT VERSION 2 für rechts */
/* <p class="p.chat-message-right">TEXT</p> / Chatnachricht */
p.chat-message-right
{
width: 60%; /* Eine Chatbox ist 60% des Displays groß */
margin: .1em;
padding: .4em .6em; /* Leichte Box-Anmutung mit etwas abgedunkelten Hintergrund */
background: #DDD;
font-size: 15px;
color: #333;
border: outset; /* Rahmen rechts + unten */
}

/* Rechts Position bei 35% + 60% = Rechter Rand bei 95% (analog dem linken Rand) */
p.chat-message-right
{
margin-left: 35%; /* Die rechte Chatbox von 35% bis 95% des Displays */
}

p.chat-message-right{
font-family: Calibri, Helvetica, sans-serif;
}

[KevinH]

Are you by chance using Mend and Prettify?

Are we talking about these lines showing in CodeView or in Preview?

If in CodeView, you do you understand that newlines (even multiple newlines) are treated just like a single space. Your css does not need to do anything special to deal with newlines after a closing p tag. It is inter-element white space just there to make the code easier to read and edit. And to prevent an entire file from being just one big continuous line.

If these lines are showing up in Preview, then it is related to using either a pre tag in CodeView someplace, or the result of css that hard codes whitespace.

I can't tell what is wrong from your image as it is all greyed out. But to my eyes it looks like a css issue with whitespace showing in Preview, maybe because of padding or a border or margins or something else. Not sure.

To test, add a bunch of newlines after one of the ending p tags in CodeView, does the whitespace in Preview that corresponds to the one you edited, grow or stay the same?

[KevinH]

Try saving your epub, then making a new testcase epub to post here. Strip a copy of your current down to a single chapter that shows the issue and your stylesheet.

Then run use the Borkify plugin that will change all your text to gibberish. You can get the Borkify plugin from our Plugin Index post here in our forum. Then save the testcase epub. And attach it to a new post of yours in this thread.

That way your text is incomprehensible but we can still see the full css and the full xhtml markup.

[phillipgessert]

Since it was fine before you copied in a bunch of CSS, and because you also lost your indents, I would just about bet that something is broken about the copied CSS, like a missing closing bracket. And your paragraph styling rules are somewhere below that breakage in the stylesheet, and ignored.

Sometimes, when stuff like that happens to me, I start by locating my paragraph CSS rules, and stick em at the very top of the CSS file. If that seems to fix it, it sort of confirms the suspicion.

[JSWolf]

Originally Posted by Vren

My CSS Style Sheet:

/************************************************** ************
Theme Name: meinstil.css
************************************************** ************/

/* Grundeinstellung: Schrift, Größe, Rand und Blocksatz */
body {display: block; font-size: 1em;font-family: 'Arial','Verdana','Times New Roman', sans-serif, serif;margin: 3px; text-align: justify;}

 <style type="text/css">
      .sizeem {font-size:1em;}
      .sizesmall {font-size:small;}
      .sizepercentage {font-size:80%;}
    </style>

 /* <p>TEXT</p> / Text normal, mit Einzug*/
p {font-style: normal; text-indent: 1em; margin: 0}

 /* <p class="n">TEXT</p> / Text normal ohne Einzug, linker Rand bündig */
.n {font-style: normal; text-indent: 0em; margin: 0}

/* <p class="ph5-subtitle">TEXT</p> / Text rechtsbündig, klein (font-weight: 500) */
.ph5-subtitle {font-style: normal;font-weight: 500;text-align: right;}

/* Überschriften */
h1 {font-style: normal;font-weight: 900;text-align: center;}
h2 {font-style: normal;font-weight: 800;text-align: center;}

/* CHAT VERSION 2 für links */
/* <p class="chat-message-left">TEXT</p> / Chatnachricht */
p.chat-message-left{
	width: 60%; 			/* Eine Chatbox ist 60% des Displays groß */
	margin: .1em;
	margin-left: 5%; 	/* Links Position bei 5% - Die linke Chatbox von 5% bis 65% des Displays */		
	padding: .4em .6em; 	/* Leichte Box-Anmutung mit etwas abgedunkelten Hintergrund */
	background: #DDD;
	font-size: 15px;
	color: #333;
	border: inset;		/* Rahmen links + oben */
	font-family: Calibri, Helvetica, sans-serif;
}

/* CHAT VERSION 2 für rechts */
/* <p class="p.chat-message-right">TEXT</p> / Chatnachricht */
p.chat-message-right
{
	width: 60%; 			/* Eine Chatbox ist 60% des Displays groß */
	margin: .1em;		
	padding: .4em .6em; 	/* Leichte Box-Anmutung mit etwas abgedunkelten Hintergrund */
	background: #DDD;
	font-size: 15px;
	color: #333;
	border: outset;		/* Rahmen rechts + unten */
}

/* Rechts Position bei 35% + 60% = Rechter Rand bei 95% (analog dem linken Rand) */
p.chat-message-right
{
	margin-left: 35%;	/* Die rechte Chatbox von 35% bis 95% des Displays */
}

p.chat-message-right{
	font-family: Calibri, Helvetica, sans-serif;
}

I've put code tags around the CSS. So now any spaces at the beginning of any lines should be visible

[readx]

I'd could be only me, but I've never used or seen <style type="text/css"> </style> in a epub-css and if you delete it, the css works as expected.

[Doitsu]

Originally Posted by Vren

My CSS Style Sheet:

<style type="text/css">
.sizeem {font-size:1em;}
.sizesmall {font-size:small;}
.sizepercentage {font-size:80%;}
</style>

Your style sheet contains html code that needs to be commented out:

/*<style type="text/css">
.sizeem {font-size:1em;}
.sizesmall {font-size:small;}
.sizepercentage {font-size:80%;}
</style>*/

[KevinH]

Great detective work!

[DNSB]

Oddly, epubcheck does not like that <style> code either. That would normally be found in the <head>...</head> of the ePub text files. If you remove the <style type="text/css"> and </style> lines, that would also work.

[Vren]

Good evening @all!!

Thank you so much for helping me! Do you know how happy I am at the moment? For days, I have searched a solution and you guys found it.

@KevinH: Thank you very much. It was a problem with Preview, not Codeview. (I tried your Borkify but it failed everytime. (I am not very versatile in those things, I got the \w error). So therefore, I just changed my text.)

@phillipgessert: I will keep your solution in mind, if future problems will appear.
@JSWolf: Thanks for having a look at my problem!

@readx: Thank you so much! I don't know when I copied that into my css but this was the culprit!

@Doitsu: That. I guess maybe I've deleted the /* and */ on my way of deleting and changing and so on. I was not aware of it as this is my first time with css and this surely is html.

@DNSB: Good to know. I will remove that from my style sheet as @readx also suggested. (For the test epub, I've left it in).

I am grinning and I am sooo relieved that the solution was that easy to spot and to change.

Thank you very much! <3 <3 <3 <3 <3