View Full Version : Epubs: keeping images and captions together


verydeepwater
11-30-2012, 06:39 AM
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; ..?

DSpider
11-30-2012, 06:59 AM
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).

mrmikel
11-30-2012, 07:29 AM
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.

DSpider
11-30-2012, 07:36 AM
Of course once it is done, you can't go back and restyle that caption without redoing the image.

And it won't be search-able either.

Jellby
11-30-2012, 08:24 AM
and "inline-block" is not in the ePub 2.1 spec, so it's only by chance if it works.

verydeepwater
11-30-2012, 08:25 AM
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).


The images and captions are left aligned in ADE and in Ibooks on my Ipad.

Jellby
11-30-2012, 09:21 AM
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"...

verydeepwater
11-30-2012, 10:28 AM
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"...

Actually, I have started using "page-break-inside: avoid" - due to this problem. I came across the "display:inline-block" method first, but as far as I can see, the result is that both the caption and image become left-aligned, even if you have specified text-align: center; for both.

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.

DiapDealer
11-30-2012, 01:48 PM
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.

mrmikel
12-01-2012, 09:18 AM
E readers are causing an upsurge in religion.....

Endless prayer that a ebook it will work on all devices!

John123
12-02-2012, 12:38 PM
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.

Can "page-break-inside: avoid" be expressed in html? I'm trying to get my head round html first before moving onto css.

DiapDealer
12-02-2012, 04:54 PM
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.

John123
12-02-2012, 05:24 PM
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.

Without trying to "tie" the caption and the illustration together, I decided to put the book on my iPhone as a trial and they didn't hold together in some cases. Moreover, some of the illustrations themselves split over two pages. It all just looks so unprofessional. A plus point was when I touched the screen for a few seconds the image opened fully in a new frame(?) and I was also able to pinch zoom.

DiapDealer
12-02-2012, 05:33 PM
A plus point was when I touched the screen for a few seconds the image opened fully in a new frame(?) and I was also able to pinch zoom.
That's just a feature of the reader.