Remove blank pages

Gunivortus · 05-20-2022, 09:57 AM

I hope, I post this below now in the correct forum ...

While formatting an ePub with pictures in Sigil (v. 1.9.2), after saving, 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).
However, they are not shown in Sigil, and I do not find those pages in the code.

I created the ePub with Calibre and in Sigil I put at the end of each chapter a "split at cursor". To keep the images at screen size I used also "split at cursor" between text and image at the beginning and the end.
Sigil shows it me correctly as I want it, the images have their own page and no blank pages are shown.
Nonetheless, they are there in the eBook viewers.
So how can I get rid of those blank pages?

If for help some code is needed, please tell me which part I shall post.

theducks · 05-20-2022, 10:10 AM

Split at cursor is just a FLAG to Sigil where to break up the file when you press F6 (do the splitting).
Other than that, it will just show as a Horizontal Rule (a line) everywhere.

Margin-bottom (and top) are common causes of a blank page following.
You are not done rendering a block, until everything has been satisfied, so if you have a margin-bottom specified after a full screen image, you get another (blank) screen.

Style (inline) or CSS: Page-Break-Before (or After) will do it

JSWolf · 05-20-2022, 11:01 AM

Are these full screen images or are they just images that fit in with the text?

Also, can you show us the CSS and the relevant HTML code?

Gunivortus · 05-20-2022, 11:14 AM

Quote:

Split at cursor[/B] is just a FLAG to Sigil where to break up the file when you press F6 (do the splitting). Other than that, it will just show as a Horizontal Rule (a line) everywhere.

Every time I set a "split at cursor" a new html section was created, so the one file at the beginning are now a total of 26 html files. Pressing F6 was seemingly not necessary. Or I do not understand you correctly.

Quote:

Margin-bottom (and top) are common causes of a blank page following.
You are not done rendering a block, until everything has been satisfied, so if you have a margin-bottom specified after a full screen image, you get another (blank) screen.

Although I do not understand CSS and what it causes, I can change digits. :-)
And this is what I did after reading your reply:

In the page_style.css I have set margin values to zero:

@page {
margin-bottom: 0;
margin-top: 0
}

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.

Quote:

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?

Regards,
Gunivortus

Gunivortus · 05-20-2022, 11:39 AM

Quote:

Originally Posted by JSWolf

Are these full screen images or are they just images that fit in with the text?

Also, can you show us the CSS and the relevant HTML code?

I am pointing to images that have a page for their own each.

This is the code of a html page with such a picture:

---------------------------------

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" lang="" xml:lang="">
<head>
<title>index</title>
<meta name="generator" content="pdftohtml 0.36"/>
<meta name="date" content="2022-05-20T13:28:03+00:00"/>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="page_styles.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body class="calibre">
<p class="calibre1"><a id="p6"></a><img src="index-6_1.jpg" alt="Image 2" class="calibre2"/></p>
</body>
</html>

---------------------------------
Just a note.... all pictures in the PDF were png files. Obviously, Calibre changed them to jpg files (and gave them another name).

This is the page_styles.css:

----------------------------------

@page {
margin-bottom: 0;
margin-top: 0
}
@font-face {
font-family: "Times New Roman";
panose-1: 2 2 6 3 5 4 5 2 3 4;
src: url(fonts/Times-New-Roman.ttf)
}
@font-face {
font-family: "Times New Roman";
panose-1: 2 2 8 3 7 5 5 2 3 4;
src: url(fonts/Times-New-Roman-Bold.ttf);
font-weight: bold
}
@font-face {
font-family: "Times New Roman";
panose-1: 2 2 5 3 5 4 5 9 3 4;
src: url(fonts/Times-New-Roman-Italic.ttf);
font-style: italic
}
@font-face {
font-family: "Times New Roman";
panose-1: 2 2 7 3 6 5 5 9 3 4;
src: url(fonts/Times-New-Roman-Bold-Italic.ttf);
font-weight: bold;
font-style: italic
}

---------------------------------

And this the stylesheet.css:

---------------------------------

ody {
widows: 1;
orphans: 1;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
text-align: justify;
}
img {
max-height: 100%;
max-width: 100%;
}
.cover {
text-align: center;
text-indent: 0;
height: 100%;
}

.calibre {
display: block;
font-family: "Times New Roman", serif;
font-size: 1.29167em;
line-height: 1.2;
padding-left: 0;
padding-right: 0;
margin: 0 5pt
}
.calibre1 {
display: block;
margin: 1em 0
}
.calibre2 {
height: auto;
width: auto
}
.calibre3 {
font-weight: bold
}
.calibre4 {
font-style: italic
}
.calibre5 {
display: block;
font-size: 1.54839em;
font-weight: bold;
line-height: 1.2;
margin: 0.67em 0
}
.calibre6 {
display: block;
list-style-type: disc;
margin-bottom: 0;
margin-right: 1em;
margin-top: 0
}
.calibre7 {
display: list-item
}
.calibre8 {
display: block;
list-style-type: circle;
margin-bottom: 0;
margin-right: 0;
margin-top: 0
}

----------------------------------

You see, I added your piece of CSS.

Kind regards,
Gunivortus

theducks · 05-20-2022, 02:11 PM

Quote:

Originally Posted by Gunivortus

Every time I set a "split at cursor" a new html section was created, so the one file at the beginning are now a total of 26 html files. Pressing F6 was seemingly not necessary. Or I do not understand you correctly.

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?

Regards,
Gunivortus

My bad

, you used the Icon, which is the immediate. (I use REGEX in many cases to insert a split marker, in bulk. F6 is the execute (after a eyeball check)
)
It is NOT the Body margin, but the P or Div that wrap the img tags that can push things.
Keyword: Box Model. Epub is boxes within boxes. Body is the chapter (file) outer layer. Each P is a box. Each Div is a box. they all get stacked inside the surrounding box (if nested) body containing many P boxes is the simplest

Gunivortus · 05-20-2022, 03:04 PM

Quote:

Originally Posted by theducks

It is NOT the Body margin, but the P or Div that wrap the img tags that can push things.
Keyword: Box Model. Epub is boxes within boxes. Body is the chapter (file) outer layer. Each P is a box. Each Div is a box. they all get stacked inside the surrounding box (if nested) body containing many P boxes is the simplest

I'm sorry friend, we seem to play in different leagues. What for you looks something simple is for me sounding like double-Dutch.
(And that's extraordinary, because I am a Dutch). :-)

Obviously, by doing these things with Sigil I seem to overreach myself.

Anyway, thanks for trying to help me.

Regards,
Gunivortus

JSWolf · 05-20-2022, 06:13 PM

Change the following and see how it goes.

Code:

<body class="calibre">

to

Code:

<body>

Code:

<p class="calibre1">

to

Code:

<p class="cover">

Tex2002ans · 05-20-2022, 06:55 PM

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=""
- Alt tags are very important for Text-to-Speech.
- Having useless text there, such as "Image 2" is worse-than-nothing.
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!

2013: "How do you vertically center a text?"

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:

Spoiler:

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:

page-break-inside

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:

Spoiler:

CSS:

Spoiler:

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".

JSWolf · 05-20-2022, 07:17 PM

@Tex2002ans, I think the problem is the extra margin space in the CSS. 2em and 10px extra space. Removing this should fix the problem and still let the images be full screen.

Gunivortus · 05-21-2022, 07:42 AM

Thank you all!

That is a lot of information I can go through and try out! Great! It certainly may cost me some days.
Because I do not really understand most if it, I will, illiterate of appropriate CSS knowledge, step by step try all suggestions - it may surprise me.

This is the first ePub I ever made myself, maybe the way I followed could be improved. My steps were (all under Windows 10):

1. Write my non-fiction text in LibreOffice, non-formatted, I use LO as it came on my desktop.
2. Put the text in my InDesign 5, formatted it, but without page numbering and added my images at the places they should.
3. Exported it to PDF. (Unfortunately, all png files were converted to jpg).
4. Used Calibre to convert the PDF to ePub. (I do not understand the many setting options Calibre offers for the conversion, so I used standards).
5. Because lots of my wished formatting was gone, I loaded the file in Sigil and tried to get it better formatted again. (Each chapter has to start on a new page, removed line breaks were added again and with your help I've got the pages with pictures only sized well.

If there's a better way to go through, I'm open for suggestions and then I do not have problems to pay some for needed software.

Thanks again you all!

Kind regards,
Gunivortus

Turtle91 · 05-21-2022, 07:53 AM

Step 1: write your book in LO. Use styling - italics and/or bold, etc. Use standardized styles.
SaveAs .docx

Step 2: use the Sigil plug-in to import .docx into Sigil.

Step 3: use Sigil to clean up anything that needs it.

That’s it!

Definitely stay away from PDF. It makes an ugly mess and there is no need to use InDesign. That is predominantly/historically for printed books and it doesn’t do so well with epubs. You’d have more to cleanup once you got the file into Sigil.

edit: added plugin link

Turtle91 · 05-21-2022, 08:34 AM

I hesitated to enter the conversation earlier... the image solution I use works very well but there are some devices that don't like it...usually older devices. However, if you check and make sure your target market supports it, then using an SVG wrapper around your image is really easy.

SVG wrappers can make your image fill the entire screen and still keep it's proper aspect ratio - it doesn't get stretched or squished. This is awesome if you want a full 'page' graphic rather than something embedded in the text. The image will be placed on it's own xhtml page so there won't be any blank pages before or after it.

You can manually create the svg wrapper - I have it set as a Sigil Clip - or you could use the InsertImageSVG plugin to do most of the work for you.

If you're manually entering it: put the image on it's own xhtml page and use the following code:

Code:

<body>
  <div>
    <svg 
	xmlns="http://www.w3.org/2000/svg" 
	height="100vh" width="100vw" 
	preserveAspectRatio="xMidYMid meet" version="1.1" 
	viewBox="0 0 800 1100" 
	xmlns:xlink="http://www.w3.org/1999/xlink">
        <image width="800" height="1100" xlink:href="../Images/SampleImage.png"/>
    </svg>
  </div>
</body>

You will need to put the image dimensions in the appropriate places (image height in the red area, image width in the blue area) and the image location/filename in the green area.

I highly recommend using an appropriately sized image to start with. If your image dimensions are too small then stretching them to fit large, or high resolution, screens will cause them to look pixelated. Most devices do a decent job with compressing larger images into a smaller screen, so I would err on the side of being too large. Having said that, don't put a 2GB file in there!

Find the happy medium.

Cheers!

Gunivortus · 05-21-2022, 11:08 AM

Quote:

Originally Posted by Turtle91

You can manually create the svg wrapper - I have it set as a Sigil Clip - or you could use the InsertImageSVG plugin to do most of the work for you.Cheers!

Thanks. Saved your suggestion and just installed that plugin.

Kind regards,
Gunivortus

Gunivortus · 05-21-2022, 02:08 PM

Quote:

Originally Posted by Turtle91

Step 2: use the Sigil plug-in to import .docx into Sigil.

Installed that plugin.
Saved my LO file to DOCX, see:

Moderator Notice
Oversized image moved to attachment. Pleas follow the guidelines (for images)

Then called the plugin to import that DOCX file:

Moderator Notice
Oversized image moved to attachment. Pleas follow the guidelines (for images)

The DOCX file to import was found.
Then clicking OK gave an error:

Moderator Notice
Oversized image moved to attachment

Tried it repeatedly.
The file is about 1.3 MB. (Pictures not added, would do that in Sigil).

What could be the problem?

Kind regards,
Gunivortus

05-20-2022, 09:57 AM	#1
Gunivortus Enthusiast Posts: 25 Karma: 10 Join Date: Apr 2019 Device: Onyx Boox Note 3	Remove blank pages I hope, I post this below now in the correct forum ... While formatting an ePub with pictures in Sigil (v. 1.9.2), after saving, 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). However, they are not shown in Sigil, and I do not find those pages in the code. I created the ePub with Calibre and in Sigil I put at the end of each chapter a "split at cursor". To keep the images at screen size I used also "split at cursor" between text and image at the beginning and the end. Sigil shows it me correctly as I want it, the images have their own page and no blank pages are shown. Nonetheless, they are there in the eBook viewers. So how can I get rid of those blank pages? If for help some code is needed, please tell me which part I shall post.

05-20-2022, 06:13 PM	#8
JSWolf Resident Curmudgeon Posts: 79,741 Karma: 145864619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Change the following and see how it goes. Code: <body class="calibre"> to Code: <body> Code: <p class="calibre1"> to Code: <p class="cover"> Last edited by JSWolf; 05-20-2022 at 06:16 PM.

05-21-2022, 07:53 AM	#12
Turtle91 A Hairy Wizard Posts: 3,347 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	Step 1: write your book in LO. Use styling - italics and/or bold, etc. Use standardized styles. SaveAs .docx Step 2: use the Sigil plug-in to import .docx into Sigil. Step 3: use Sigil to clean up anything that needs it. That’s it! Definitely stay away from PDF. It makes an ugly mess and there is no need to use InDesign. That is predominantly/historically for printed books and it doesn’t do so well with epubs. You’d have more to cleanup once you got the file into Sigil. edit: added plugin link Last edited by Turtle91; 05-21-2022 at 08:08 AM.

05-21-2022, 08:34 AM	#13
Turtle91 A Hairy Wizard Posts: 3,347 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	I hesitated to enter the conversation earlier... the image solution I use works very well but there are some devices that don't like it...usually older devices. However, if you check and make sure your target market supports it, then using an SVG wrapper around your image is really easy. SVG wrappers can make your image fill the entire screen and still keep it's proper aspect ratio - it doesn't get stretched or squished. This is awesome if you want a full 'page' graphic rather than something embedded in the text. The image will be placed on it's own xhtml page so there won't be any blank pages before or after it. You can manually create the svg wrapper - I have it set as a Sigil Clip - or you could use the InsertImageSVG plugin to do most of the work for you. If you're manually entering it: put the image on it's own xhtml page and use the following code: Code: <body> <div> <svg xmlns="http://www.w3.org/2000/svg" height="100vh" width="100vw" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 800 1100" xmlns:xlink="http://www.w3.org/1999/xlink"> <image width="800" height="1100" xlink:href="../Images/SampleImage.png"/> </svg> </div> </body> You will need to put the image dimensions in the appropriate places (image height in the red area, image width in the blue area) and the image location/filename in the green area. I highly recommend using an appropriately sized image to start with. If your image dimensions are too small then stretching them to fit large, or high resolution, screens will cause them to look pixelated. Most devices do a decent job with compressing larger images into a smaller screen, so I would err on the side of being too large. Having said that, don't put a 2GB file in there! Find the happy medium. Cheers!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Blank pages	Sablerose	Marvin	11	02-08-2014 09:06 AM
Unwanted blank pages	wdaly	ePub	8	02-27-2013 11:10 AM
Blank Pages	PAULINE BIRCHNAL	Conversion	5	01-02-2012 12:47 PM
Troubleshooting one after another blank pages	monsterbadgog	Amazon Kindle	0	02-20-2011 04:02 PM
Blank pages	JSWolf	Calibre	4	11-29-2008 01:22 PM

05-20-2022, 10:10 AM	#2
theducks Well trained by Cats Posts: 31,047 Karma: 60358908 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Split at cursor is just a FLAG to Sigil where to break up the file when you press F6 (do the splitting). Other than that, it will just show as a Horizontal Rule (a line) everywhere. Margin-bottom (and top) are common causes of a blank page following. You are not done rendering a block, until everything has been satisfied, so if you have a margin-bottom specified after a full screen image, you get another (blank) screen. Style (inline) or CSS: Page-Break-Before (or After) will do it

05-20-2022, 11:01 AM	#3
JSWolf Resident Curmudgeon Posts: 79,741 Karma: 145864619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Are these full screen images or are they just images that fit in with the text? Also, can you show us the CSS and the relevant HTML code?

05-20-2022, 07:17 PM	#10
JSWolf Resident Curmudgeon Posts: 79,741 Karma: 145864619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	@Tex2002ans, I think the problem is the extra margin space in the CSS. 2em and 10px extra space. Removing this should fix the problem and still let the images be full screen.

05-21-2022, 07:42 AM	#11
Gunivortus Enthusiast Posts: 25 Karma: 10 Join Date: Apr 2019 Device: Onyx Boox Note 3	Thank you all! That is a lot of information I can go through and try out! Great! It certainly may cost me some days. Because I do not really understand most if it, I will, illiterate of appropriate CSS knowledge, step by step try all suggestions - it may surprise me. This is the first ePub I ever made myself, maybe the way I followed could be improved. My steps were (all under Windows 10): 1. Write my non-fiction text in LibreOffice, non-formatted, I use LO as it came on my desktop. 2. Put the text in my InDesign 5, formatted it, but without page numbering and added my images at the places they should. 3. Exported it to PDF. (Unfortunately, all png files were converted to jpg). 4. Used Calibre to convert the PDF to ePub. (I do not understand the many setting options Calibre offers for the conversion, so I used standards). 5. Because lots of my wished formatting was gone, I loaded the file in Sigil and tried to get it better formatted again. (Each chapter has to start on a new page, removed line breaks were added again and with your help I've got the pages with pictures only sized well. If there's a better way to go through, I'm open for suggestions and then I do not have problems to pay some for needed software. Thanks again you all! Kind regards, Gunivortus

Advert

Advert