12-23-2012, 04:02 PM | #1 |
Member
Posts: 19
Karma: 124040
Join Date: Apr 2012
Location: Antananarivo, Madagascar
Device: Kobo Touch
|
Full-page illustration that doesn’t interrupt the text
How can I insert a full-page illustration in an epub file without interrupting the text? For example, I have something like this:
Code:
<p>Here comes the first paragraph of text...</p> <div> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="800" width="600" xlink:href="Illustration.jpeg"></image> </svg> </div> <p>... then the second paragraph comes here, and the story continues.</p> What I’d like to do, in human language, would be to insert a tag that tells the reader "insert this image as soon as you can, but don’t break the text’s flow for it". |
12-23-2012, 04:25 PM | #2 |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
Historically, HTML/CSS didn't really have a mechanism for that. Content either appears in the flow at a particular point or is absolutely placed relative to the viewport or page. Neither one would result in what you're asking for.
I think the best you can realistically do is to put it on a separate page that's outside the flow and provide a link to it (<a name="backref001" href="...">show</a>) and make the image be a link back (<a href="origfile.html#backref001">). In theoretical future readers that support all of CSS3, you might be able to to this: Code:
img { move-to: page-top; } |
Advert | |
|
12-23-2012, 07:39 PM | #3 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
Because of this problem, I always make sure that paragraphs always are complete before a picture. At least the reader doesn't have to hold a thought as they skip over a picture.
Image maps don't work in epubs, so any link would have to be in the caption. If you have larger tablets as your target, then this sort of linking is worthwhile. For smaller readers, the detail and grayscale just aren't there to make it worthwhile, in my opinion. |
12-23-2012, 07:56 PM | #4 | |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
Quote:
Code:
<a href="..."><img src="..." /></a> |
|
12-23-2012, 10:17 PM | #5 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977896
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
Be aware, images as links don't work in all readers. I don't have multiple readers to test on, but they won't work on my Sony prs-T1, or on the Sony Reader software for pc. They DO work on ADE for the desktop (and apparently in webkit software, as Sigil and Calibre reader).
I found this out during a recent large conversion project, and it broke my heart. Last edited by GrannyGrump; 12-23-2012 at 10:48 PM. |
Advert | |
|
12-24-2012, 04:08 AM | #6 |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
|
12-24-2012, 05:40 AM | #7 |
Member
Posts: 19
Karma: 124040
Join Date: Apr 2012
Location: Antananarivo, Madagascar
Device: Kobo Touch
|
In the book I have, a full-page illustration is inserted mid-chapter. The paragraphs are complete, but it’s still annoying when for example, the last paragraph before the illustration is way up there on the page, leaving a huge blank space on the page…
|
12-24-2012, 06:31 AM | #8 |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Yes, it's irritating, but there's nothing you can do, other than moving the illustration elsewhere, maybe including a thumbnail and link in the text.
In its current (2.0.1) implementation, ePub doesn't have anything about floats (vertical floats, that is... there's the possibility of having something float to the left or right of a paragraph). Elements are displayed as they appear in the source, so an image will not be moved up or down its position. It might change with ePub 3 and CSS 3, but I wouldn't hold my breath. |
12-24-2012, 07:08 AM | #9 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
In a small device with limited grayscale, floats are not very useful for illustrations anyway.
I strive to get the maximum use of illustrations for the reader, but that means that I end up landscaping some, making the user turn their book sideways. At least they can see as much as can be shown in a small device. It will have to do until the portable hologram projectors come out next Christmas! |
12-24-2012, 01:00 PM | #10 | |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
Quote:
Please write to Sony and complain about their brokenness. There's simply no excuse for that. If enough people complain, maybe Sony's readers will eventually be HTML 1.0 compliant.... Also, why is the Sony reader application on OS X almost as slow as the one that I wrote in pure JavaScript (including the unzip library)? Just saying. |
|
12-24-2012, 01:27 PM | #11 |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
|
12-24-2012, 04:08 PM | #12 |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
Bummer. They based it on Adobe's code. I'll file a bug with Adobe, not that I'm expecting them to ever fix it.
|
12-24-2012, 06:48 PM | #13 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
|
12-24-2012, 11:37 PM | #14 | |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
Quote:
That's not an unspec'd feature. Image links have been part of the HTML spec since at least mid-1993. But yes, the EPUB specification won't cover floating images up or down until whatever version of the EPUB spec incorporates support for all of CSS3—I'm guessing EPUB 4 or 5.... |
|
12-25-2012, 03:59 AM | #15 | |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
The example says: Code:
img { move-to: page-top; } /* move images to page-top */ @page { padding-top: 10em; } /* leave a gap at the top of the page */ body:after { /* place a box at the top of each page */ position: fixed; top: 0; left: 0; right: 0; height: 10em; content: pending(page-top); /* insert the images moved to page-top */ } |
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
how to convert a scanned page from a book (looks like photo of page) to clean text? | neuvivlio | Workshop | 34 | 11-29-2012 09:05 AM |
Need help w/very simple task: page of Word text > Kindle text I can share w/friends | kearnine | Conversion | 1 | 10-17-2012 08:25 PM |
image on separate page without half-page text next | Toxaris | ePub | 2 | 01-26-2011 03:32 AM |
Double tap doesn't zoom images full screen | nonsequito | Apple Devices | 0 | 01-15-2011 05:03 PM |
Error text overwrites page text? | troymc | Sigil | 6 | 07-07-2010 09:07 PM |