7

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…

Improve this question
2
  • Yes! Ebooks badly need this capability! Unfortunately i don't believe it can be done in the current format. What ePub needs is an image attribute that says "display at the next page break", rather than " display here".
    – Stephen R
    May 21, 2022 at 16:37
  • The responders are not understanding the question, so I'll try to clarify. He's asking for the following: Add an image to an ebook that displays full page, BUT doesn't cause text to cut off to show the image. Currently if the place you add a large image happens to be halfway down the screen, the text cuts off and the image is on the next page. Question is asking to place an image so that the text will naturally proceed to the bottom of the screen, and the next page shows the image. Meaning the placement of the image is relative to how the device is specifically reflowing the text.
    – Stephen R
    May 21, 2022 at 16:45

5 Answers 5

Reset to default
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%;}
Improve this answer
1
  • You're not understanding the question. The don't want text to cut off because an image is shown. Putting in a hard page break before an image (usually) results in a partial page of text before the image
    – Stephen R
    May 21, 2022 at 16:38
1

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.

Improve this answer
1
  • For devices that understand SVG, this is the most reliable way of doing it.
    – Moilleadóir
    Aug 27, 2020 at 7:57
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.

Improve this answer
2
  • 2
    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, 2017 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, 2017 at 17:28
0

This is what worked for me on Remarkable Table (Remarkable 1)

Under Text > cover.xhtml

    <?xml version="1.0" encoding="utf-8"?>
<!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>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="calibre:cover" content="true"/>
  <title>Cover</title>
</head>

<body>
  <div>
    <img id="logo" src="../img/workbook.png"/>
  </div>
</body>
</html>

Under Styles > dotepub.css, i placed the following content. Edit the height and width to match your picture.

#logo {
    display: inline;
    border: 0;
    height: 32px;
    width: 160px;
    margin: 0 0 2em 0;
    padding: 0;
}

Placed the workbook.png file under Images > workbook.png

Improve this answer
0

I'm not going to claim that my solution is what was asked for, as I'm not sure epub can support the exact solution which the o/p requested. But my solution is much closer than the other answers posted here, and might be as close as you can get to the desired answer in epub.

This is what I put in the head section of the .html page -

<head>
   <link href="../stylesheet.css" type="text/css" rel="stylesheet" />
</head>

This is what I put in the body text -

<p>Text of last paragraph before the image tag. Add some dummy text here, running to half-a-dozen lines on screen in your ebook reader.</p>

<!-- Image tag -->
<span style="text-indent:0">
  <img class="image-float" src="../Image.jpg" />
</span>

<p>Text of next paragraph after the image tag. Add some dummy text here, running to half-a-dozen lines in your ebook reader.</p>

The crucial bit is whether you specify the class as image-float or as image-full (see stylesheet, below).

This is what I put in the cascading style sheet (stylesheet.css) -

.image-full {  /* Inline Images : Full Page */
  display: inline-block;  /* Does not add line-break after */
  margin: 0 auto;         /* Alternative: 1em auto */
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
  max-width: 100%;
  height: 100%;    /* Expands image to the full height of page */
  /* Omit height option if need to include text with the image */
  }

.image-float {  /* Inline Images : Floating */
  display: inline-block;  /* Does not add line-break after */
  float: left; position: relative;
  text-align: left;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 1em;
  max-width: 66%;  /* Limits image width to 66% of the page width */
  border: 1px solid;
  }

I can only test this in a limited number of readers.

Looking at the result on my laptop running Windows 7, in Calibre's Ebook Viewer (for Windows), it does flow the text around the image, certainly if you specify the class as image-float in the img tag.

I'm going to give Calibre an unsolicited plug. As free software for Windows, it includes an ebook management program which can convert almost any ebook format to almost any other; plus it comes with an eBook editor, that edits in epub format (but the main program can then convert the result to almost any format you need); and it also comes with an eBook Viewer in which you can read your ebook in Windows.

There are also versions for Mac and Android (but I've only been using the Windows version).

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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