Homepage
Login
Profile
BookClubs
dmBox
I'm interested in taking some text and making an ePub e-book out of it. It has full-page images in it. Is there some way in ePub to make an image become a full-page image that properly gets reflowed when the font size changes? That is, I want the image to always take up a full page, but when the font size changes, the text should reflow so that the image is still full page, but doesn't break the text off on the previous page.
I'm describing this very poorly.
When I was a kid, I would read the novels my father had acquired when he was a kid. Nancy Drew, Hardy Boys, Rick Brant, Ken Holt, Tom Swift /Jr., etc.
These books had a style of illustration, where every so often there would be a full-page illustration. It had a line from the text of book below it in italics. It was usually within a page or two of where the text it illustrated came from.
I'd like to recreate this in an ePub book I'm formatting. There are pull-out illustrations, which don't need to be at a particular place in the text. If reading the book on a device which displays a page at a time, what I want to have happen is for the text to reach the bottom of a page, you "flip" the page, there is a full-page illustration, you "flip" again, and you're back reading the text. It shouldn't matter where the page breaks are, the text should flow to the end of a page, then the illustration, and then the text resumes. If I change the font size (because my eyes are getting worse), it should still be a full-page illustration that doesn't cause the previous page of text to break off half-way down.
Is this possible?
Thanks…
Free books android app tbrJar TBR JAR Read Free books online gutenberg
(3)More posts by @Cathy
3 Comments
Sorted by latest first Latest Oldest Best
The other suggestions didn't work for the device I'm using (reMarkable). However, I found an epub file that looked right so grabbed the cover page from that. It's an xhtml file with the contents as follows:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="calibre:cover" content="true"/>
<title>Cover</title>
<style type="text/css" title="override_css">
@page {padding: 0pt; margin:0pt}
body { text-align: center; padding:0pt; margin: 0pt; }
</style>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1399 2200" preserveAspectRatio="none">
<image width="1399" height="2200" xlink:href="cover.jpeg"/>
</svg>
</div>
</body>
</html>
A little hacky but works. It basically fills the entire page with an SVG tag and I guess the image resizes itself to fit. You can probably play with the aspect ratio if you wish but on the correct aspect device it looks fine.
Free books android app tbrJar TBR JAR Read Free books online gutenberg
Either put the images in their own html files or use the code above, page-break-before, or -after.
In these situations I generally use the css height: 100%, on both the container and the image itself, so if you use
<div class="fullscreenimage"><img src="some-image.jpg" alt="lalala" /></div>
you could create this css rule that does what you want:
div.fullscreenimage , div.fullscreenimage img {height: 100%;}
Free books android app tbrJar TBR JAR Read Free books online gutenberg
I have some ideas here, but I haven't tested it out. Also, a lot depends on support on reading system.
In epub3, it's possible to use CSS to force a page break before or after an element. Something like this: img.fullpage {page-break-after: always;}
Conversely, you could use img.fullpage {page-break-before: always;}
The only catch is that it's not supported in Google Play Books. I think it works in some (most?) Kindles.
As you describe the problem, font-size is irrelevant.
Also, your css code should let the image resize depending on screen size. I use max-width. On kindles, max-width is NOT supported, so here's how I do it. kdp.amazon.com/community/thread.jspa?messageID=1005910&
One more thing. Because of the flakiness of support for page-break-after, I try to put images at the beginning or end of chapters.
This formatting issue shouldn't be hard if everybody supported epub3 adequately. Unfortunately some reading systems -- and some older devices don't.
Free books android app tbrJar TBR JAR Read Free books online gutenberg