Page breaks -- best practices?

[Psymon]

Hey, folks...

I'm working on a Shakespeare book, and have run into a problem that I'm sure must be affecting all of my previous ebooks, too, but I just simply never noticed before -- it's only because I have a "header" image in this one that it suddenly became apparent.

Attached here is a screenshot (from my iPad) of my title page and the first page (inline ToC), as it is at the moment (which might change). Both are in the same file, with a page-break in-between, but I have no idea why the header image gets bumped down a little after the page break.

Here's the way I'm doing my page breaks now (which I'm sure I must have gotten from these forums at some point, since I don't think I would have come up with this way of doing it myself).

In my HTML I have...

  <div class="pagebreak">
    &nbsp;
  </div>

...and then my CSS for that is...

.pagebreak {
	page-break-before: always !important;
	margin: 0;
	padding: 0;
	line-height:0;
}

I can't imagine what's causing things to get bumped down a touch after a page break -- if there's a better (if not "best") way to do those, though, I'd be more than happy to change them all, in all my previous books, too.

I can upload a mini-version of my book with the first few pages, if necessary -- and thanks, as always, in advance!

EDIT: Oh, I should probably have included the code for where those header images are, too.

The HTML for that/those is...

  <p class="header"><img alt="ornament" src="../Images/header-black.gif"/></p>

...and this CSS...

p.header {
	font-size:100%;
	line-height: 138%;
	margin-top: 0;
	margin-bottom: 1em;
	padding: 0;
}

[Toxaris]

You should check the HTML and body tags in css. You can also use the @page selector to fix this.

[GrannyGrump]

Does the
<div class="pagebreak">
&nbsp;
</div>

appear at the top of both pages? If it is only on the second page, that "empty" line is probably causing the drop.

I think you should post the first two pages so the complete html is available for examination.

[Psymon]

Originally Posted by Toxaris

You should check the HTML and body tags in css. You can also use the @page selector to fix this.

Here's what I have for those...

@page {
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
}

html>body {
	font-family: English, Georgia, 'Times New Roman', Times, serif;
	font-weight: normal;
	font-size: 100%;
}

body {
	font-family: English, Georgia, 'Times New Roman', Times, serif;
	font-weight: normal;
	font-size: 100%;
	line-height: 138%;
	margin: 0 0 0 0;
}

Is it, indeed, the @page thing? I put in the 5px (for top, left and right) as per a recommendation here to do that, in order to counter any shadows from the edge of peoples' devices.

If that's what's causing that extra bit of space after a page break, wouldn't it also affect the very first page, too (i.e. the beginning of the HTML file)?

[Psymon]

Originally Posted by GrannyGrump

Does the
<div class="pagebreak">
&nbsp;
</div>

appear at the top of both pages? If it is only on the second page, that "empty" line is probably causing the drop.

Well, the left page is the very first thing in the file -- the very beginning of the book.

I think you should post the first two pages so the complete html is available for examination.

Here, attached is the "front matter" for my book (as it exists at the moment).

[GrannyGrump]

I really do think (although Tox and other experts might see something else) it is that nbsp causing your trouble.

You don't need that in your div, you know. I have often used a "pagebreak" div like that, and always leave the div completely empty:
<div style="page-break-before: always !important" />

OR

<div class="pagebreak" />


Try it and let us know what happens.

[Psymon]

Originally Posted by GrannyGrump

I really do think (although Tox and other experts might see something else) it is that nbsp causing your trouble.

You don't need that in your div, you know. I have often used a "pagebreak" div like that, and always leave the div completely empty:
<div style="page-break-before: always !important" />

Oh, interesting. As I said in my first post, I don't know where/how I came up with the way that I did that, as I can't see myself having come up with that on my own -- I'm sure I must have gotten that way of doing page breaks from here in these forums at some time in the past.

Try it and let us know what happens.

As far as I can tell, your way of doing it did the trick! Thank you! I guess I'll wait to hear if anyone else has any input on this, though, before I go ahead and change everything everywhere. I'm sure there must have been some reason why I did it the other way -- I have no idea, though, what that might be.

[GrannyGrump]

Glad that worked. BTW, the book looks beautiful!

[Psymon]

Originally Posted by GrannyGrump

Glad that worked. BTW, the book looks beautiful!

Thank you! And I'm certainly glad it works, too, but as I said I'm sure there's gotta be a reason why I did it the way I had it before, and that I got that way of doing it from a previous question on these forums. I tried searching for it, but couldn't find anything. That's my only hesitancy now in going ahead and changing everything to what you suggested -- although if nobody comes up with a reason for why I did it the previous way, naturally I'll just go ahead and do so.

[GrannyGrump]

I think it was your thread https://www.mobileread.com/forums/sho...-before&page=2
Look at posts 30 thru 33. The space was intended to force ADE to jump the "page number" up to the next digit.

I don't know that that is such a critical issue, depends on which you consider worse: A page number repeated, or the top of page mis-aligned.

You could always just split the file at each new page-break, and have multiple small files.

(I do that after I have completed all editing with the book in a ginormous single file)

[Turtle91]

Originally Posted by GrannyGrump

You could always just split the file at each new page-break, and have multiple small files.

^^^ This. It makes it so much easier to navigate within Sigil, search/replace is much faster on smaller files, and it guarantees the start at the top of a new page. AFAIK there are some devices that don't always honor <page-break> as they should.

[Psymon]

Well, this is strange, I know I replied to this already, but that reply seems to have disappeared! Or maybe I neglected to hit the submit button and closed my browser or something -- but that would be odd.

Anyway, I'll try to replicate my earlier reply...

Originally Posted by GrannyGrump

I think it was your thread https://www.mobileread.com/forums/sho...-before&page=2
Look at posts 30 thru 33. The space was intended to force ADE to jump the "page number" up to the next digit.

I don't know that that is such a critical issue, depends on which you consider worse: A page number repeated, or the top of page mis-aligned.

That's the first I've ever heard of a device getting the page numbering off (for any reason). Seems odd that that would happen.

In any case, the reason for adding in the nbsp into that div would appear to be from this comment from Jellby...

https://www.mobileread.com/forums/sho...9&postcount=32

...where he said that "For some renderers you may have to include some content in the <div>, or it will be discarded," and then putting that nbsp in there for "content." Looking at my original code, I'm surprised that just that nbsp did bump things down at all anyway, since my margins, padding and line-height were all set to "0" -- it's as though that was all ignored.

You could always just split the file at each new page-break, and have multiple small files.

Except that goes back to the reason for that whole other thread -- having separate files causes ADE to insert blank pages where you don't (or may not) want them.

Also, from Turtle...

Originally Posted by Turtle91

It makes it so much easier to navigate within Sigil, search/replace is much faster on smaller files, and it guarantees the start at the top of a new page. AFAIK there are some devices that don't always honor <page-break> as they should.

I agree on the navigating-within-Sigil advantage, for sure, although I guess my concern is the aforementioned blank pages in ADE issue. As for how fast search & replaces are, well, they just take a second or two for me on my computer as it is now, so cutting that in half isn't really much of an advantage.

I was really only planning on putting this book on the iBooks store anyway, perhaps I shouldn't be too concerned about whether the page breaks work (or not) in other devices -- although it's certainly nice if they do, if I ever change my mind about that. The issue over ADE inserting blank pages (as per that other thread) does bug me, though, if I were to go with separate files.

[GrannyGrump]

I guess when you speak of "inserting blank pages" you are talking about reading in a two-page // two-column mode. I only ever read in single-column mode, so I never even considered that issue (I'm only a hobbyist uploading free books, so "my way or the highway, baby"). I have never seen ADE on PC or my Sony reader insert blank pages.

I wonder if a poll would turn up a preponderance of users reading in two-page mode...

[Psymon]

Originally Posted by GrannyGrump

I guess when you speak of "inserting blank pages" you are talking about reading in a two-page // two-column mode. I only ever read in single-column mode, so I never even considered that issue (I'm only a hobbyist uploading free books, so "my way or the highway, baby"). I have never seen ADE on PC or my Sony reader insert blank pages.

Well, if you read my original post/query over on that other thread, I explain what the issue is -- 5 pages of responses on that, too. Here's a link to the start of the thread...

https://www.mobileread.com/forums/sho...d.php?t=245061

[GrannyGrump]

If you need to have the nbsp content to preserve your page display --- just a thought for a kind of klunky kludge --- maybe, at the very top of the file --- if you put a simple div (no page-break) with nbsp, or a <br /> with nbsp on the <p> that holds the top image like so:

<p class="header">&nbsp;<br /><img alt="ornament" src="../Images/header-red.gif" /></p>

Then play with margin, font-size to get the same offset that displays after the programmatic page-break on the "catalogue" page.

VERY inelegant, I know.