03-16-2012, 06:01 PM | #1 |
Enthusiast
Posts: 37
Karma: 10
Join Date: Jul 2011
Device: Kindle
|
Displaying Photos and Captions Together
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, 06:54 AM | #2 |
Fanatic
Posts: 580
Karma: 810184
Join Date: Sep 2010
Location: Norway
Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad
|
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
Code:
p.caption {page-break-before:never;} 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. |
Advert | |
|
03-19-2012, 04:13 PM | #3 |
Enthusiast
Posts: 37
Karma: 10
Join Date: Jul 2011
Device: Kindle
|
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, 04:17 PM | #4 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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, 09:49 AM | #5 |
Zealot
Posts: 127
Karma: 12096
Join Date: May 2010
Device: Loads!
|
Try putting the image and caption in a DIV then applying
Code:
display:inline-block; |
Advert | |
|
03-20-2012, 01:59 PM | #6 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
Is display:inline-block supported?
|
03-20-2012, 07:36 PM | #7 |
Zealot
Posts: 127
Karma: 12096
Join Date: May 2010
Device: Loads!
|
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, 03:27 AM | #8 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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, 11:49 AM | #9 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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, 02:19 PM | #10 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
Thanks Jellby for confirming my suspicions. I couldn't find it though.
|
03-25-2012, 10:36 AM | #11 |
Enthusiast
Posts: 37
Karma: 10
Join Date: Jul 2011
Device: Kindle
|
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 Last edited by yoss15; 03-25-2012 at 10:40 AM. |
03-25-2012, 11:32 AM | #12 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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, 04:32 PM | #13 |
Fanatic
Posts: 580
Karma: 810184
Join Date: Sep 2010
Location: Norway
Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad
|
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, 05:58 PM | #14 |
Wizard
Posts: 1,613
Karma: 6718479
Join Date: Dec 2004
Location: Paradise (Key West, FL)
Device: Current:Surface Go & Kindle 3 - Retired: DellV8p, Clie UX50, ...
|
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, 01:31 AM | #15 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
I agree with dwig, that is what I always do when I don't use SVG. SVG I only use in cases of captions.
|
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Creator problem with font size in captions | PeterValentine | Kindle Formats | 3 | 12-18-2011 06:59 AM |
Images and captions in epub | Balaji | Workshop | 3 | 08-19-2011 08:00 AM |
Wrong rendering of captions in "Le Devoir" news feed | PoP | Recipes | 2 | 01-29-2011 02:29 PM |
Figure captions | amoroso | Sigil | 6 | 07-13-2010 02:29 PM |
captions and images together | detede | Apple Devices | 11 | 06-14-2010 09:00 PM |