Quote:
Originally Posted by Gunivortus
I see before and after many images empty pages ( in the ebook-viewer of Calibre and in the viewer of my Boox Note 3 E-Ink tablet).
|
Some of these could be happening because of the 100% max-height.
For a quick hack, you could change:
Code:
img {
max-height: 100%;
max-width: 100%;
}
into:
Code:
img {
max-height: 98%;
max-width: 98%;
}
and see if that solves your problem.
* * *
Side Note: You may also want to adjust your:
Code:
<p class="calibre1"><a id="p6"></a><img src="index-6_1.jpg" alt="Image 2" class="calibre2"/></p>
to this:
Code:
<div class="image"><a id="p6"></a><img alt="" src="index-6_1.jpg"/></div>
What changed?
- <p> -> <div>
- <p>s usually have margins and extra fluff.
- <div>s are usually blank slates.
- (This is also a common cause of the problem you're seeing. Especially when devices/readers begin overriding settings like line-height/font-size/indents.)
- alt="Image 2" -> alt=""
- class="calibre2" -> [NOTHING]
- In your specific case, the calibre2 CSS was useless.
- Usually, you want to give your CSS human-readable names, such as "wholepageimage".
Quote:
Originally Posted by Gunivortus
In the stylesheet.css I have also set to zero everywhere where a margin-top and a margin-bottom appear.
I saved it, but at checking the new ePub with my readers, the empty pages still appear.
|
What's most likely happening is:
- Little edges/margins built into the readers themselves when they are trying to generate pages/screens.
- Minor differences in "What's 100% height"?
The reading system tries to generate a page. Let's say it's 100 units high:
- You want the image to stretch to 100% height.
- The image gets stretched as best as it can, but it ends up being 100.0000001 tall.
- The image can't fit on the screen (it's larger than 100)
- Device adds a blank page before.
- Device shows as much of the image as it can.
- But now there's a teeny tiny sliver below.
- Device adds a blank page after
- Because it's larger than 100.
When you do that 98% hack I mentioned above, that may make the entire image fall below that limit... hence, no automatic page breaks.
Side Note: Why? When you tell your image to be "100% height"... there's no such thing in HTML. It's undefined. All devices/programs deal with this in slightly different ways, with little quirks/edge-cases.
(This same blank-page-around-images issue has been written about a bajillion times over the years, even going way back to 2011! Jellby has written a lot about this topic.)
A similar situation even happens when trying to vertically center text in the screen!
Quote:
Originally Posted by Gunivortus
Quote:
Originally Posted by theducks
Style (inline) or CSS: Page-Break-Before (or After) will do it
|
I'm sorry, but I don't understand this. Is it something I could add to each html section page, or in one of the two CSS files? |
He was just guessing potential ideas of what it could be.
Now that you've posted your code, CSS Page Breaks weren't your problem.
* * *
Side Note: But what does the CSS for before/after page breaks actually do?
They add page breaks!
Example
HTML:
This says to ALWAYS put a page break before the <div>:
CSS:
Code:
div.figure {
page-break-before: always;
}
This says to ALWAYS put a page break after the <div>:
CSS:
Code:
div.figure {
page-break-after: always;
}
Sometimes it is used in code when you want the image on its own page.
(If you are familiar with Microsoft Word, this is like you pressing
Ctrl+Enter (Insert > Page Break).)
Side Note #2: Then, you also have:
which is usually used to say: "Try NOT to put a page break here".
For example, you may want a whole poem/stanza to stick together:
HTML:
CSS:
If a page break just so happens to land between line 1 and 2, you may want to say "Nah, instead, push the entire stanza to the next page. Treat this as one entire chunk if possible."
I explained that all in more detail in
2021: "Problems with page breaks/blank pages/line spaces".