4

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…

1

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%;}
0

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. https://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.

  • 1
    Hi! This doesn't really do what I want. I'm looking for a way to have the full-page image float around so that it won't break the text off early. When I change the font-size, it shouldn't suddenly break a page of half-way through to make the image full size, it should just push the image later in the text. – Ricky Morse Sep 27 '17 at 16:33
  • I don't understand what you mean in the last sentence. Have you tried the clear property? w3schools.com/cssref/pr_class_clear.asp – idiotprogrammer Sep 28 '17 at 17:28
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.