View Full Version : Displaying Photos and Captions Together


yoss15
03-16-2012, 06: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?

SBT
03-17-2012, 06:54 AM
For scaling of images, you might find my answer in this thread (http://www.mobileread.com/forums/showthread.php?t=172390) 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.

yoss15
03-19-2012, 04: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?

Toxaris
03-19-2012, 04: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).

Oxford-eBooks
03-20-2012, 09: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.

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

Oxford-eBooks
03-20-2012, 07: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.

Toxaris
03-21-2012, 03: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.

Jellby
03-21-2012, 11:49 AM
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.

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

yoss15
03-25-2012, 10: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

Toxaris
03-25-2012, 11:32 AM
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.

SBT
03-25-2012, 04: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.

dwig
03-25-2012, 05: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.

Toxaris
03-26-2012, 01: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.