11-30-2012, 05:39 AM | #1 |
Member
Posts: 86
Karma: 12586
Join Date: Nov 2012
Device: Ipad and Kindle Fire
|
Epubs: keeping images and captions together
To keep images and captions together I have tried enclosing both in a div tag with a class keeptogether and stating in the stylesheet:
div.keeptogether { display:inline-block; } This seems to work. The only problem is that the image and caption are always left-aligned, event when I put text-align: center; Does anyone know a way to make the images centred while using: display:inline-block; ..? |
11-30-2012, 05:59 AM | #2 |
Evangelist
Posts: 450
Karma: 343115
Join Date: Nov 2009
Location: Romania
Device: PW2 2014
|
Left aligned in what application? Because with ePub we're back in 1999 where the same webpage looked differently in every browser.
While it may be displayed to the left in ADE, it may look fine in Sigil or in iBooks (and vice-versa for each ePub reading software or e-reader firmware). |
11-30-2012, 06:29 AM | #3 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
If caption and image must stay together, then make them one image.
Of course once it is done, you can't go back and restyle that caption without redoing the image. One thing to be cautious of: In my Sony if the image gets too tall, it will bleed over onto the next page over text when displayed on a reader or the Reader Library, but will not show in Sigil. |
11-30-2012, 06:36 AM | #4 |
Evangelist
Posts: 450
Karma: 343115
Join Date: Nov 2009
Location: Romania
Device: PW2 2014
|
|
11-30-2012, 07:24 AM | #5 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
and "inline-block" is not in the ePub 2.1 spec, so it's only by chance if it works.
|
11-30-2012, 07:25 AM | #6 | |
Member
Posts: 86
Karma: 12586
Join Date: Nov 2012
Device: Ipad and Kindle Fire
|
Left aligned
Quote:
The images and captions are left aligned in ADE and in Ibooks on my Ipad. |
|
11-30-2012, 08:21 AM | #7 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Why don't you use just "display: block; text-align: center;" for the container block? (or just remove the display, as a <div> is shown as block by default.
Ah... I guess it's because ADE does not obey "page-break-inside: avoid"... |
11-30-2012, 09:28 AM | #8 | |
Member
Posts: 86
Karma: 12586
Join Date: Nov 2012
Device: Ipad and Kindle Fire
|
Quote:
So as you suggest, "page-break-inside: avoid"... is probably the way to go. I am still at the stage where I get thrown if things don't appear correctly in ADE. Thanks for your help. |
|
11-30-2012, 12:48 PM | #9 |
Grand Sorcerer
Posts: 27,465
Karma: 192992430
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
There's frankly no method that's guaranteed to work on all devices/apps ... outside of including the caption as part of the image, of course. I wouldn't exert a lot of effort trying to control something that can be so casually broken. I'd address it with "page-break-inside: avoid"; then forget about it and hope that more systems start obeying the attribute in the future.
Last edited by DiapDealer; 11-30-2012 at 01:02 PM. |
12-01-2012, 08:18 AM | #10 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
E readers are causing an upsurge in religion.....
Endless prayer that a ebook it will work on all devices! |
12-02-2012, 11:38 AM | #11 | |
Connoisseur
Posts: 82
Karma: 73150
Join Date: Feb 2011
Location: Scottish Highlands
Device: Samsung Note, Kindle, hudl2
|
Quote:
|
|
12-02-2012, 03:54 PM | #12 |
Grand Sorcerer
Posts: 27,465
Karma: 192992430
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Html? No. But it can be expressed using inline styles. There's no real point in separating styling from html. They go pretty much hand-in-hand with ePub proficiency. You're not going to be able to do very much without some styles -- whether they're inline, internal or external. That, plus you're asking for answers to some very non-html related issues.
Last edited by DiapDealer; 12-02-2012 at 03:57 PM. |
12-02-2012, 04:24 PM | #13 | |
Connoisseur
Posts: 82
Karma: 73150
Join Date: Feb 2011
Location: Scottish Highlands
Device: Samsung Note, Kindle, hudl2
|
Quote:
|
|
12-02-2012, 04:33 PM | #14 | |
Grand Sorcerer
Posts: 27,465
Karma: 192992430
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Quote:
|
|
Tags |
captions, epub conversion, images |
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Keeping images from Re-sizing on Kindle Fire | MJWare | Kindle Formats | 3 | 08-21-2012 10:32 AM |
PRS-T1 Scaling Images in epubs | mochaiso | Sony Reader | 4 | 06-08-2012 12:33 AM |
Images and captions in epub | Balaji | Workshop | 3 | 08-19-2011 08:00 AM |
A bug with images in epubs? | Cyclops | ePub | 2 | 09-13-2010 10:57 AM |
captions and images together | detede | Apple Devices | 11 | 06-14-2010 09:00 PM |