Epubs: keeping images and captions together

[verydeepwater]

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]

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]

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]

Originally Posted by mrmikel

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]

and "inline-block" is not in the ePub 2.1 spec, so it's only by chance if it works.

[verydeepwater]

Originally Posted by DSpider

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]

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]

Originally Posted by Jellby

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]

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]

E readers are causing an upsurge in religion.....

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

[John123]

Originally Posted by DiapDealer

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]

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]

Originally Posted by DiapDealer

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]

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.