Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 03-16-2012, 06:01 PM   #1
yoss15
Enthusiast
yoss15 began at the beginning.
 
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?
yoss15 is offline   Reply With Quote
Old 03-17-2012, 06:54 AM   #2
SBT
Fanatic
SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.
 
SBT's Avatar
 
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;}
, 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.
SBT is offline   Reply With Quote
Advert
Old 03-19-2012, 04:13 PM   #3
yoss15
Enthusiast
yoss15 began at the beginning.
 
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?
yoss15 is offline   Reply With Quote
Old 03-19-2012, 04:17 PM   #4
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
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).
Toxaris is offline   Reply With Quote
Old 03-20-2012, 09:49 AM   #5
Oxford-eBooks
Zealot
Oxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of light
 
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;
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.
Oxford-eBooks is offline   Reply With Quote
Advert
Old 03-20-2012, 01:59 PM   #6
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
Is display:inline-block supported?
Toxaris is offline   Reply With Quote
Old 03-20-2012, 07:36 PM   #7
Oxford-eBooks
Zealot
Oxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of lightOxford-eBooks is a glorious beacon of light
 
Posts: 127
Karma: 12096
Join Date: May 2010
Device: Loads!
Quote:
Originally Posted by Toxaris View Post
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.
Oxford-eBooks is offline   Reply With Quote
Old 03-21-2012, 03:27 AM   #8
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
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.
Toxaris is offline   Reply With Quote
Old 03-21-2012, 11:49 AM   #9
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
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.
Jellby is online now   Reply With Quote
Old 03-21-2012, 02:19 PM   #10
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
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.
Toxaris is offline   Reply With Quote
Old 03-25-2012, 10:36 AM   #11
yoss15
Enthusiast
yoss15 began at the beginning.
 
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.
yoss15 is offline   Reply With Quote
Old 03-25-2012, 11:32 AM   #12
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
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.
Toxaris is offline   Reply With Quote
Old 03-25-2012, 04:32 PM   #13
SBT
Fanatic
SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.
 
SBT's Avatar
 
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.
SBT is offline   Reply With Quote
Old 03-25-2012, 05:58 PM   #14
dwig
Wizard
dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.dwig ought to be getting tired of karma fortunes by now.
 
dwig's Avatar
 
Posts: 1,613
Karma: 6718479
Join Date: Dec 2004
Location: Paradise (Key West, FL)
Device: Current:Surface Go & Kindle 3 - Retired: DellV8p, Clie UX50, ...
Quote:
Originally Posted by yoss15 View Post
...
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.
dwig is offline   Reply With Quote
Old 03-26-2012, 01:31 AM   #15
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
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.
Toxaris is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 04:37 PM.


MobileRead.com is a privately owned, operated and funded community.