View Full Version : Displaying Photos and Captions Together

03-16-2012, 07:01 PM
Hey, I'm putting together an ePub and need help with the photos.

Essentially I want to force the captions to be displayed on the same page as the photo its associated with.

Currently, some photos and captions work, some don't, it depends on the device and the photo.

I know that the photo will have to be resized to accomplish this, is there anyway to do that automatically?

03-17-2012, 07:54 AM
For scaling of images, you might find my answer in this thread ( useful. I'm sure I've read a thread about keeping captions/images on same page, but I can't find it. Short version, either in css, define
p.caption {page-break-before:never;}
, though you're not guaranteed that this will always be respected,
or use SVG. Trickier, but you're guaranteed to always have the image and caption on the same page. You also get full control over image scaling.

03-19-2012, 05:13 PM
I'm kind of stuck because some of my images take up a whole page by themselves. Is there resize the images which are too large using the CSS file?

Are there any attributes which force a resize if they aren't on the same page?

03-19-2012, 05:17 PM
I would recommend the SVG wrapper as SBT suggests. I find it the best solution so far. You can use svg-edit as an intermediate solution, but you need to do some post work. I am working on a video to demonstrate how to do this, but everything is in dutch (it is for a dutch forum, sorry).

03-20-2012, 10:49 AM
Try putting the image and caption in a DIV then applying display:inline-block; to the div. It'll force it to treat the whole DIV as one unit and therefore won't orhpan the caption if it tries to flow off the bottom of the screen.

03-20-2012, 02:59 PM
Is display:inline-block supported?

03-20-2012, 08:36 PM
Is display:inline-block supported?

Yeah sure is.
Works just nicely on iBooks, but it seems to work best if you put it inline in a style attribute rather than coming from CSS in a class, where it seems to be ignored (on iBooks)
Think it's fine in ADE as well, if memory serves me right.

03-21-2012, 04:27 AM
The fact that it works in iBooks doesn't mean it is supported in the ePUB specifications. Perhaps I have to try it in ADE to check. Not that ADE always follow specs either, but usually a bit better.
The fact that iBooks somtimes ignores CSS entries is sad, but we have seen it before.

03-21-2012, 12:49 PM
No, inline-block is not supported by the spec (meaning that any reader could not support it ant still be compliant; of course, any reader could support it too).

What is supported by the spec is "page-break-inside: avoid", but that doesn't mean it will be supported by whatever reader.

03-21-2012, 03:19 PM
Thanks Jellby for confirming my suspicions. I couldn't find it though.

03-25-2012, 11:36 AM
My issue is that all of my photos are larger than most screens it seems. What I did is resize them to 90% or 80% depending on how large the caption following them is, allowing it all to fit on one page because all of my photos have a page break before. Coupling this with display:inline-block works for me.

I know this isn't the ideal solution but it was the best I could come up with as I have no experience with SVG.

This seems to do what I want for both iBooks and ADE whereas page-break-inside:avoid wasn't working for me with ADE although I think it is supposed to.

The issue I'm having now is that although my captions are centered in ADE the images are not. I've tried all kinds of tweaking to my CSS and can't get it to center. Its not on the right margin, about 25% off of it.

I have text-align:center for my images and the margin set to margin:0 auto; but no luck, any ideas?

Edit: I've also tried margin: 1em 0 with the same results

03-25-2012, 12:32 PM
Normally center will work, but iBooks will not play nice. Especially when the images are larger than the screen, you would be better off with SVG, as you can create a so called ViewBox which resizes automatically according to the screen.

03-25-2012, 05:32 PM
To get images centered, I've ended up defining the left margin explicitly, setting it to (100-width%)/2 percent, e.g.
img#photo1 {width:70%; margin-left: 15%;}
I suppose you should set the right margin too, just to be on the safe side...
This works in ADE, at least.

03-25-2012, 06:58 PM
I have text-align:center for my images ...

In my experience, ADE does not support center aligned images when it's the image that has the centering style.

To center images in ADE reliably, place the image tag in a <P> or <DIV> that has a style applied that includes both text-align:center; and text-indent: 0;. There may be other methods, but this has worked for me.

03-26-2012, 02:31 AM
I agree with dwig, that is what I always do when I don't use SVG. SVG I only use in cases of captions.