Page blank before and after book image page

osiris12 · 12-20-2011, 01:29 PM

Hello - First time epub writer. I have a manuscript that has 2 html pages: Cover.html and book.html

When I just create an epub from the book, all is fine but I want the first page to be the cover image. So my content.opf looks like the text below, but there is always a blank page on page 1 then the image appears on page 2 than another blank page before the book starts. Seems like the cover.html page is inserting page breaks before and after that html loads. Is there anyway to stop this?

This is the content.opf file. Any help would be appreciated. Thanks.

?xml version="1.0" encoding="utf-8" standalone="yes"?>
<package xmlns="http://www.idpf.org/2007/opf" unique-identifier="BookID" version="2.0">
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns

pf="http://www.idpf.org/2007/opf">
<dc:identifier id="BookID" opf:scheme="UUID">b778c5ff-6a7f-406b-ae4a-62a1b1b72634</dc:identifier>
<dc:title>book title1</dc:title>
<dc:identifier opf:scheme="ISBN"></dc:identifier>
<dc:subject>Science Fiction&Fantasy</dc:subject>
<dc:creator opf:role="aut">aaa</dc:creator>
<dc:description>test</dc:description>
<dc

ublisher>aaai</dc

ublisher>
<dc:date opf:event="publication">2011-12-20</dc:date>
<dc:language>en</dc:language>
<meta name="cover" content="CoverImage.jpg" />
<meta content="0.4.903" name="Sigil version" />
</metadata>
<manifest>
<item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml" />
<item href="Images/CoverImage.jpg" id="CoverImage.jpg" media-type="image/jpeg" />
<item href="Text/CoverPage.html" id="CoverPage.html" media-type="application/xhtml+xml" />
<item href="Text/book.htm" id="book.htm" media-type="application/xhtml+xml" />
</manifest>
<spine toc="ncx">
<itemref idref="CoverPage.html" />
<itemref idref="book.htm" />
</spine>
<guide>
<reference href="Text/CoverPage.html" title="Cover" type="cover" />
</guide>
</package>

theducks · 12-20-2011, 01:36 PM

Nothing strange leaps our with that OPF

Your image WITH MARGINS AND PADDING may be larger than the screen.
that will cause new pages on both sides.
Blank lines, (Even non-printing) Headings are another cause.
Codeview is King

Please show the Code from after </head>
And the CSS stylessheet

osiris12 · 12-20-2011, 02:04 PM

That makes sense about the image size being too big. It's 1035x1600 pixels

Here is the code in the Cover.html page

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>cover</title>
</head>

<body>
<img alt="" height="100%" src="../Images/CoverImage.jpg" width="100%" />
</body>
</html>

osiris12 · 12-20-2011, 02:31 PM

Ok.. I played around with the width on the img tag. The Ipad seems to like 90%. Now I have to test it on the Ipod Touch and other devices. Not sure how to ensure that the image fits (displays) on all devices correctly... :-(

theducks · 12-20-2011, 03:00 PM

Quote:

Originally Posted by osiris12

That makes sense about the image size being too big. It's 1035x1600 pixels

Here is the code in the Cover.html page

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>cover</title>
</head>

<body>
<img alt="" height="100%" src="../Images/CoverImage.jpg" width="100%" />
</body>
</html>

You have no style assigned

Youse gets what the reading device defaults to(not always 0)

IMHO A minimum style controls borders, padding and margins (even if the are forced to 0)

osiris12 · 12-20-2011, 06:19 PM

I have the style in the Book.html file

body {
margin: 0in 13.5pt ;
font-size: 12pt; font-family: "Bookman Old Style", "serif";
text-align: left;
ont-weight:normal;
}
h1{
text-align: center;
font-size: 16pt;
font-family: "Arial","sans-serif";
margin-top: 10px;
margin-right: 5px;
page-break-before:always;
margin-bottom: 20px; margin-left: 6px
}
p {
font-weight:normal;
}
span.sgc-7 {font-style: italic;}
div.sgc-6 {text-align: left}
span.sgc-5 {font-family: Arial,sans-serif;}
table.sgc-4 {border: 1px solid rgb(0, 0, 255); width: 100%; text-align: center; margin-right: auto; font-weight: bold;}
div.sgc-3 {text-align: center;}
div.sgc-2 {text-align: left;}
big.sgc-1 {font-weight: bold}

p.sgc-8 {font-weight:normal}

theducks · 12-20-2011, 06:45 PM

Quote:

Originally Posted by osiris12

I have the style in the Book.html file

body {
margin: 0in 13.5pt ;
font-size: 12pt; font-family: "Bookman Old Style", "serif";
text-align: left;
ont-weight:normal;
}
h1{
text-align: center;
font-size: 16pt;
font-family: "Arial","sans-serif";
margin-top: 10px;
margin-right: 5px;
page-break-before:always;
margin-bottom: 20px; margin-left: 6px
}
p {
font-weight:normal;
}
span.sgc-7 {font-style: italic;}
div.sgc-6 {text-align: left}
span.sgc-5 {font-family: Arial,sans-serif;}
table.sgc-4 {border: 1px solid rgb(0, 0, 255); width: 100%; text-align: center; margin-right: auto; font-weight: bold;}
div.sgc-3 {text-align: center;}
div.sgc-2 {text-align: left;}
big.sgc-1 {font-weight: bold}

p.sgc-8 {font-weight:normal}

Run Flightcrew against your book.
I don't think a nekid' <img will pass
Your browser/reader is helping

You only have body margins, no P margins set.
add margin: 0 to your P style

Perkin · 12-21-2011, 05:29 AM

Quote:

Originally Posted by osiris12

I have the style in the Book.html file

body {
margin: 0in 13.5pt ;
font-size: 12pt; font-family: "Bookman Old Style", "serif";
text-align: left;
ont-weight:normal;
}

Unrelated, but you missed the effin font

'f' in font.

theducks · 12-21-2011, 09:55 AM

Quote:

Originally Posted by Perkin

Unrelated, but you missed the effin font

'f' in font.

ADE will ignore the whole body style over that one.
ADE is intolerant of errors

Jellby · 12-22-2011, 04:47 AM

Quote:

Originally Posted by theducks

ADE will ignore the whole body style over that one.
ADE is intolerant of errors

If that's the case, then ADE is just buggy and non-compliant. The CSS spec says unknown properties should just be ignored, they are a mistake of the creator, but don't make the stylesheet invalid.

A different situation is if you forget a colon or semicolon, or write "1.2fm" instead of "1.2em"...

theducks · 12-22-2011, 09:34 AM

Quote:

Originally Posted by Jellby

If that's the case, then ADE is just buggy and non-compliant. The CSS spec says unknown properties should just be ignored, they are a mistake of the creator, but don't make the stylesheet invalid.

A different situation is if you forget a colon or semicolon, or write "1.2fm" instead of "1.2em"...

Just the tag, not the whole stylesheet gets ignored. A typo, anywhere within the selector , seems to trigger this.
But in some case, who can tell

An early class in a cascade goes south and lots of things go into left field

Ketut Wirya · 05-28-2015, 11:26 AM

Try this one, it work for my ebook
<body>
<div style="text-align: center;"><img alt="knowing God" src="../Images/knowing%20God.jpg" /></div>
</body>

Dont use <p> for cover image
<body>
<p style="text-align: center;"><img alt="knowing God" src="../Images/knowing%20God.jpg" /></p>
</body>

theducks · 05-28-2015, 04:27 PM

The Reason for using Div over P is that P has default margins and stuff.
Div defaults to almost everything not set.

12-20-2011, 01:29 PM	#1
osiris12 Junior Member Posts: 4 Karma: 10 Join Date: Dec 2011 Device: IPAD, Kindle fire	Page blank before and after book image page Hello - First time epub writer. I have a manuscript that has 2 html pages: Cover.html and book.html When I just create an epub from the book, all is fine but I want the first page to be the cover image. So my content.opf looks like the text below, but there is always a blank page on page 1 then the image appears on page 2 than another blank page before the book starts. Seems like the cover.html page is inserting page breaks before and after that html loads. Is there anyway to stop this? This is the content.opf file. Any help would be appreciated. Thanks. ?xml version="1.0" encoding="utf-8" standalone="yes"?> <package xmlns="http://www.idpf.org/2007/opf" unique-identifier="BookID" version="2.0"> <metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlnspf="http://www.idpf.org/2007/opf"> <dc:identifier id="BookID" opf:scheme="UUID">b778c5ff-6a7f-406b-ae4a-62a1b1b72634</dc:identifier> <dc:title>book title1</dc:title> <dc:identifier opf:scheme="ISBN"></dc:identifier> <dc:subject>Science Fiction&Fantasy</dc:subject> <dc:creator opf:role="aut">aaa</dc:creator> <dc:description>test</dc:description> <dcublisher>aaai</dcublisher> <dc:date opf:event="publication">2011-12-20</dc:date> <dc:language>en</dc:language> <meta name="cover" content="CoverImage.jpg" /> <meta content="0.4.903" name="Sigil version" /> </metadata> <manifest> <item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml" /> <item href="Images/CoverImage.jpg" id="CoverImage.jpg" media-type="image/jpeg" /> <item href="Text/CoverPage.html" id="CoverPage.html" media-type="application/xhtml+xml" /> <item href="Text/book.htm" id="book.htm" media-type="application/xhtml+xml" /> </manifest> <spine toc="ncx"> <itemref idref="CoverPage.html" /> <itemref idref="book.htm" /> </spine> <guide> <reference href="Text/CoverPage.html" title="Cover" type="cover" /> </guide> </package> Last edited by osiris12; 12-20-2011 at 01:31 PM.

05-28-2015, 11:26 AM	#12
Ketut Wirya Junior Member Posts: 1 Karma: 10 Join Date: May 2015 Device: iphone6, ipad mini, Macbook Air	Avoid blank page after a cover image Try this one, it work for my ebook <body> <div style="text-align: center;"><img alt="knowing God" src="../Images/knowing%20God.jpg" /></div> </body> Dont use <p> for cover image <body> <p style="text-align: center;"><img alt="knowing God" src="../Images/knowing%20God.jpg" /></p> </body>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
iPad I found the uwnated blank pages before and after for each full-page image on iPad.	Vengadesan	Apple Devices	1	07-07-2011 01:23 AM
Blank first page	spaze	Writer2ePub	3	05-15-2011 11:41 AM
[Old Thread] epub -> mobi conversion; blank page after image	joubert	Calibre	10	03-07-2011 05:26 PM
image on separate page without half-page text next	Toxaris	ePub	2	01-26-2011 03:32 AM
PRS-505 Help Please,Book goes blank from page 23 or so onwards	Liquidsilver	Sony Reader	3	07-05-2010 03:33 AM

12-20-2011, 01:36 PM	#2
theducks Well trained by Cats Posts: 30,913 Karma: 60358908 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	Nothing strange leaps our with that OPF Your image WITH MARGINS AND PADDING may be larger than the screen. that will cause new pages on both sides. Blank lines, (Even non-printing) Headings are another cause. Codeview is King Please show the Code from after </head> And the CSS stylessheet

12-20-2011, 02:04 PM	#3
osiris12 Junior Member Posts: 4 Karma: 10 Join Date: Dec 2011 Device: IPAD, Kindle fire	That makes sense about the image size being too big. It's 1035x1600 pixels Here is the code in the Cover.html page <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>cover</title> </head> <body> <img alt="" height="100%" src="../Images/CoverImage.jpg" width="100%" /> </body> </html>

12-20-2011, 02:31 PM	#4
osiris12 Junior Member Posts: 4 Karma: 10 Join Date: Dec 2011 Device: IPAD, Kindle fire	Ok.. I played around with the width on the img tag. The Ipad seems to like 90%. Now I have to test it on the Ipod Touch and other devices. Not sure how to ensure that the image fits (displays) on all devices correctly... :-(

12-20-2011, 06:19 PM	#6
osiris12 Junior Member Posts: 4 Karma: 10 Join Date: Dec 2011 Device: IPAD, Kindle fire	I have the style in the Book.html file body { margin: 0in 13.5pt ; font-size: 12pt; font-family: "Bookman Old Style", "serif"; text-align: left; ont-weight:normal; } h1{ text-align: center; font-size: 16pt; font-family: "Arial","sans-serif"; margin-top: 10px; margin-right: 5px; page-break-before:always; margin-bottom: 20px; margin-left: 6px } p { font-weight:normal; } span.sgc-7 {font-style: italic;} div.sgc-6 {text-align: left} span.sgc-5 {font-family: Arial,sans-serif;} table.sgc-4 {border: 1px solid rgb(0, 0, 255); width: 100%; text-align: center; margin-right: auto; font-weight: bold;} div.sgc-3 {text-align: center;} div.sgc-2 {text-align: left;} big.sgc-1 {font-weight: bold} p.sgc-8 {font-weight:normal}

05-28-2015, 04:27 PM	#13
theducks Well trained by Cats Posts: 30,913 Karma: 60358908 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	The Reason for using Div over P is that P has default margins and stuff. Div defaults to almost everything not set.

Advert

Advert