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 05-02-2013, 12:44 PM   #1
silviolorusso
Enthusiast
silviolorusso began at the beginning.
 
silviolorusso's Avatar
 
Posts: 32
Karma: 10
Join Date: Jun 2011
Device: none
Best way to format images and captions in EPUB

Hello,

I'm wondering what is the best way to format images and captions in EPUB.
I tried the following but I have a problem when I have a very long image, it goes over the window size in ADE.

Code:
<style>
img {
	width: auto;
	height: auto;
	max-width: 70%;
	max-height: 100%;
}
div.img {
	text-align: center;
        page-break-after:always;
}
</style>

<div class="frame img">
	<img src="source.jpg" alt="image" />
        <p class="caption">Caption</p>
</div>
silviolorusso is offline   Reply With Quote
Old 05-02-2013, 05:06 PM   #2
mrmikel
Color me gone
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 2,086
Karma: 1444487
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
You are trapping the caption in the div for the picture. This makes more than 100%.
mrmikel is offline   Reply With Quote
Old 05-02-2013, 08:22 PM   #3
Adjust
Addict
Adjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel is
 
Adjust's Avatar
 
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
Make the image 80% heigh or something to allow for the caption on the same page
Adjust is offline   Reply With Quote
Old 05-03-2013, 05:56 AM   #4
silviolorusso
Enthusiast
silviolorusso began at the beginning.
 
silviolorusso's Avatar
 
Posts: 32
Karma: 10
Join Date: Jun 2011
Device: none
Thanks everyone, the actual problem is not the only the caption, but the fact the image itself goes out of the window in ADE.
silviolorusso is offline   Reply With Quote
Old 05-03-2013, 06:26 AM   #5
Adjust
Addict
Adjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel is
 
Adjust's Avatar
 
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
Can you screen cap your problem so can see?
Adjust is offline   Reply With Quote
Old 05-03-2013, 07:25 AM   #6
pdurrant
Santa Mouse
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 33,361
Karma: 90870086
Join Date: Jul 2007
Location: Norfolk, England
Device: NOOK ST GlowLight
You've specified the image height, but not the size of the enclosing div. 100% doesn't mean 100% of the screen, it means 100% of the enclosing block.

Try

Code:
div.img {
	height: 100%;
        text-align: center;
        page-break-after:always;
}
pdurrant is offline   Reply With Quote
Old 05-03-2013, 08:51 AM   #7
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: 6,316
Karma: 4963983
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
That would be the same, as the <div> is contained in something else (at least <body> and <html>), and those have probably no height defined. Even if they had "height:100%", it's not clear that that should relate to the screen height. It might work, but I don't think it's against the spec if it doesn't.
Jellby is offline   Reply With Quote
Reply

Tags
epub, html, image, picture

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Epubs: keeping images and captions together verydeepwater ePub 13 12-02-2012 05:33 PM
Images and captions in epub Balaji Workshop 3 08-19-2011 09:00 AM
captions and images together detede Apple Devices 11 06-14-2010 10:00 PM
E-book format that supports images? scarab1 Workshop 11 03-05-2010 04:21 AM
Best format in DR1000s for Images? alxwang Workshop 2 05-12-2009 12:26 PM


All times are GMT -4. The time now is 02:22 PM.


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