Problems with page breaks/blank pages/line spaces

[olbeggaols]

Problems with page breaks/blank pages/line spaces

Hello,

X Fourth try. The original post was to the wrong forum and I was inststructed to move it to the General Forum. When I clicked on the link the post was not there to move, so I posted the second try in General. I then got a private message which was a tad snippy telling me that I could not cross post, had posted to the wrong forum and that my second and third tries were deleted and that the first post was posted to the correct forum. This one.

However in the meantime the problem had changed and the first, second, and third posts became irrelevant. So this:

Please feel free to delete the original post on this forum. Please do not delete this post.
Thank you.

Windows 7 64bit

First go around I had problems with certain pages where I want the content to appear all on one page on the screen; pages appeared properly in Calibre, were broken in Kobo Forma and Kindle.

Work around: make images of those pages, make .html files with those images. Worked for Kobo with e-pub, Kindle.

But for the main body of the text, mobi in Kobo (again, appeared correctly in Calibre) inserted extra line spaces for every line!

So the question now is: how to get rid of the extra line-spaces in mobi files?
And: Is there a better way to handle the no-page-break for this page problem?

[Turtle91]

Originally Posted by olbeggaols

So the question now is: how to get rid of the extra line-spaces in mobi files?
And: Is there a better way to handle the no-page-break for this page problem?

1) I would wager that any extra line breaks come from your css. If you’d care to post the html and css here, we may be able to help.
2) There are commands for page-break:avoid, but different readers/apps honor them differently. There is no way to enforce all your text showing up on the same page in a reflowable format like ePub. The only option would be to make an image of it, as you found. *shudder* I HIGHLY recommend NOT doing that. Using an image disables all the things that make an ebook desirable to the user… changing font, font size, margins, line spacing, letter color, background color, etc. etc. etc. and so forth, and so on.

The real answer is making your css appropriate to the situation.

[olbeggaols]

Hello Turtle91,

Thank you for your response.

Images first: I don't think that the pages made into images, placed in html files are going to disturb readers in this case as they are only the front-matter pages (copyright, dedication, title page) and disturb more broken.

As for the css. I hesitate to post the problematic html portion of the book as it is fairly long. Would a short section of same do?
Similarly what would you need from the css. It too is relatively long and I suspect mostly irrelevant to this issue.

[Turtle91]

A section of html that demonstrates the problem, and the corresponding css. That would be anything with the class, id, or element.

Such as:
<p class=“Image”><img alt=“” src=“Myimage.jpg” class=“morecss”/></p>

Would have any css corresponding to:
p
img
.Image
.morecss

There may be more, but that would at least get us started. On the other hand css files are very small (kb wise) so attaching it to your post isn’t a big deal.

You REALLY don’t need an image for a dedication page…. If your dedication is so long that it would be longer that a normal sized screen, then making it an image would make the text on it so small as to be unreadable.
Is there some overriding law of the universe that requires it to be on the same page? Seriously, no one reads the copyright page anyway

[olbeggaols]

Hello Dion,

Again thank you for your attention to this problem.

Just to be clear: the images in htmls are only for those pages specified; the main body of the book is an html file. The dedication and copyright pages are static throughout the series and I assume will not be read and would rather have them on their own page as opposed to a nearly empty page with one line at the top and similar uglies. The Title page I really need to appear on a page by itself. It is too small in Kindle (ok in Kobo for e-pub), but not unreadable, but I will ponder your suggestion. The thing is, it works fine for e-pubs on the Kobo and for the azw3 on Kindle. The problem is only with mobi.

This is an example of the coding on the html page. It is all the same. Simple, no scripts or tricks, all on one file. Opening the file in my Kobo Forma every line has what looks like a line-space between it and the next line.

Markup looks like this:

<p class="f4">Once Upon a Time, The Lucky Man,<br />
Ukkattha-Town,<br />
Good-luck Grove,<br />
at the root of the Old Sal Willow<br />
came a revisiting.</p>

<p class="f4">There, to the Beggars gathered round, he said:</p>

<p class="f4">"Beggars!"</p>

<p class="f4">And the Beggars responding:</p>

<p class="f4">"Broke-Tooth!"</p>

<p class="f4">the Lucky Man said this:</p>


What I would consider as relevant in the css:

}

div.main {
width: 100%;
margin-left: auto;
margin-right: auto;
}


p {font: 1em "Times", "Times New Roman", serif;
margin-top: 0;
margin-bottom: 6px;
}

}
.f4 {
font: 1.1667em "Times", "Times New Roman", serif;
}

Is this possibly the 'margin bottom: 6px'

[Turtle91]

The 6px definitely adds space that shouldn't be there on your normal paragraphs within the "chapter" paragraphs... but it shouldn't cause multiple blank lines.

You can try replacing the 6px with 0 (zero) and see if it fixes the issue. I would also take a look at your <br/> css and see if that is giving excess space or a line-height too large. Also check to see if there is some other <div> css that could be adding spaces. One way to see what is effecting a particular section is to use the inspector in Sigil. Just highlight an area and the inspector will tell you all the different css.

Now - for a little advice on the css that is not relevant to your question

div.main does not need a margin-left or margin-right at all... your width is set to 100% so there won't be a margin to divide.

Your p and p.f4 are almost identical; the margin top/bottom in the p should be left for the user to select in their reader/app, and defining the font-name for all body text is forbidden by amazon...so I would recommend something along these lines:

div.main {width: 100%}
p.f4 {font-size: 1.2em}

[JSWolf]

I know one thing that's wrong. The CSS has errors and RMSDK on the Forma is completely ignoring the CSS.

[olbeggaols]

Thanks again Dion,

I will modify my css largely along the lines you suggest. I am new to e-books, and just used my html css.

I see the uselessness of the left and right margins under main.

There is no special css definition for <br /> and there are no other divisions under main.

[olbeggaols]

Hello again Jon and Dion,

Jon: are you speaking of the errors that Dion mentioned? I am beginning to see the differences required for e-pubs over websites and it is likely that there are other problems in the complete css. What I will do therefore is to strip back the css to just what is needed and add back if later books need something additional. It would be helpful if you were to show me the errors; after all I am making them, how am I going to spot them? It's like trying to find the correct spelling for a word you don't know the correct spelling for.

Dion: No specified font.
First are you saying that
.f {font-family: "Times", "Times New Roman", serif;}
should be deleted?
And also the naming of the font in the case of size classes:
.f4 {font: 1.1667em "Times", "Times New Roman", serif;}

The question then becomes what about exotic diacriticals? There are only a few fonts that I am aware of that have the full set that I will need.

Amazon may forbid it, but the font came out as specified on the Kindle and also on the Kobo with the e-pub format. Again there, the problem was not the font, it was the spacing.

Just to note: The idea that the reader can re-design my books is repellant to me in the extreme! I have been in publishing since 1959 and old thinking dies hard. I have designed many textbooks and scientific books and the idea that someone could come along and change the font and sizing would be just crazy destructive to meaning as well as looks. Book design is an art, like other arts. Would it be reasonable to tell Rembrandt to change black to white? But I guess this is a battle long lost.

Not having a good day here. Tried to post this and am being told that I am not logged in whereas I am logged in and it says so right above this box.
Logged in again and it froze the forum for me. Logged out, logged back in; no post. But I eventually do catch on and had saved it. Try again now. Let's see.

[JSWolf]

Can you post your entire CSS?

[olbeggaols]

Hello Jon,

I do not see css allowed in the attachments description, so here it is: (Note, only partly changed per Dion's suggestions at this point.)

@charset "utf-8";
/* Page Last Updated */
/* Sunday, March 28, 2021 8:29 AM */

body {
    background: none repeat;
}

div.main {
	width: 100%;
	}
	
div.inlgbdr {
	border: solid 6px #cc6600;
	padding: 12px;
	margin-left: auto;
	margin-right: auto;
	}

div.floatl {
  float: left;
  padding: 6px;
  }

div.floatr {
  float: right;
  padding: 6px;
  }

a:link {
   color: #000000;
   background: none repeat;
}

a:visited {
   color: #cc6600;
   background: none repeat;
}

a:hover {
   border: none;
   color: #cc6600;
   background: none repeat;
}

img {
   border: none;
   }

p {font: 1em "Times", "Times New Roman", serif;
   margin-top: 0;
   margin-bottom: 0px;
   }

.f {
   font-family: "Times", "Times New Roman", serif;
}
.f1 {
   font: .667em "Times", "Times New Roman", serif;
}
.f2 {
   font: .833em "Times", "Times New Roman", serif;
}
.f3 {
   font: 1em "Times", "Times New Roman", serif;
}
.f4 {
   font: 1.1667em "Times", "Times New Roman", serif;
}

.f8 {
	font: 3em "Times", "Times New Roman", serif;
	margin-top: 1.0em;
   margin-bottom: 1em;
   }
 
p.lgqt {
   margin-left: +36px;
   margin-top: 0;
   margin-bottom: 6px;
   margin-right: +36px;
   font: 1em "Times", "Times New Roman", serif;
   }

.ctr {
   text-align: center;
   }
.rt {
   text-align: right;
}
.left {
   text-align: left;
}
.just {
   text-align: justify;
}
.in1 {
   margin-left: 24px;
   }
.in2 {
   margin-left: 48px;
   }
.in3 {
   margin-left: 72px;
   }
.in4 {
   margin-left: 96px;
   }

h1 {
   text-align: center;
   font: bold 2em "Times", "Times New Roman", serif;
   color: #cc6600;
   background: none repeat;
   }

h4 {
   font: bold 1.1667em "Times", "Times New Roman", serif;
   background: none repeat;
   }

.c {
   color: #cc6600;
   background: none repeat;
}

.g {
   color: green;
   background: none repeat;
}

.r {
   color: red;
   background: none repeat;
}

hr {
   text-align: center;
   width: 100%;
   height: 1px;
   color: #cc6600;
   background: none repeat;
   }

hr.demi {
   text-align: left;
   width: 25%;
   height: 1px;
   color: #cc6600;
   background: none repeat;
}
	
.hrctr {
	width: 25%;
	margin-left: auto;
	margin-right: auto;
   color: #cc6600;
   background: none repeat;
	}

[JSWolf]

I've cleaned up the CSS. I've removed a lot of rubbish. I did add in a new body style. The styles I removed, you don't need. You have no need for colors. On most eInk Readers such as Kobo & Kindle, colors are not going to work well.

@charset "utf-8";
/* Page Last Updated */
/* Sunday, March 28, 2021 8:29 AM */
body {
  widows: 1;
  orphans: 1;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  text-align: justify;
}
div.main {
  width: 100%;
}
div.inlgbdr {
  border: solid 6px;
  padding: 1em;
}
div.floatl {
  float: left;
  padding: 6px;
}
div.floatr {
  float: right;
  padding: 6px;
}
p {
  margin-top: 0;
  margin-bottom: 0;
}
.f1 {
  font-size: 0.667em;
}
.f2 {
  font-size: 0.833em;
}
.f8 {
  font-size: 3em;
  margin-top: 1em;
  margin-bottom: 1em;
}
p.lgqt {
  margin-left: 2em;
  margin-top: 0;
  margin-bottom: 0.4em;
  margin-right: 2em;
}
.ctr {
  text-align: center;
  text-indent: 0;
}
.rt {
  text-align: right;
}
.left {
  text-align: left;
}
.in1 {
  margin-left: 1.5em;
}
.in2 {
  margin-left: 3em;
}
.in3 {
  margin-left: 4.5em;
}
.in4 {
  margin-left: 6em;
}
h1 {
  text-align: center;
  text-indent: 0;
  font-weight: bold;
  font-size: 2em;
}
h4 {
  font-weight: bold;
  font-size: 1.1667em;
}
hr {
  text-align: center;
  text-indent: 0;
  width: 100%;
  height: 2px;
}
hr.demi {
  text-align: left;
  width: 25%;
  height: 2px;
}
.hrctr {
  width: 25%;
}

[olbeggaols]

Thanks Jon,

I will modify my css accordingly. Some of the useless items are there because I have been using the same css for PDFs.


"text-align: justify" (if this is not something that is required whether the body text is justified or not, all my books would be "text-align: right"
The text is not poetry, but is broken up into meaningful phrases.

[JSWolf]

Originally Posted by olbeggaols

Thanks Jon,

I will modify my css accordingly. Some of the useless items are there because I have been using the same css for PDFs.


"text-align: justify" (if this is not something that is required whether the body text is justified or not, all my books would be "text-align: right"
The text is not poetry, but is broken up into meaningful phrases.

Because justify is in the body style, you don't need to specify it. You only need to specify left, center, right. Justify becomes the default.

CSS is not always a one size fits all. You have to tailor your CSS to your content and where it will be used. So you have to think of a greyscale eInk screen and not use colors. <a> does not need styles. Hover does not work. You have to have font-size: font-weight: font-family: and not just font:. You don't need to specify a body text font size. The default of 1em is what you want and then anyone who changes the font size will get what they expect. The text size for smallcaps is 0.8333em. with a center, you also need a text-indent of 0.

[olbeggaols]

OK, thank you Jon.