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 01-26-2012, 05:14 AM   #1
GrannyGrump
Persnickity Nitpicker
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 568
Karma: 2654022
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
Image captions --- how to keep with image?

Finally got free time while the library is open, so I can post!

I have been compiling illustrated ePubs, and it seems like the only way I can be sure the caption doesn't get orphaned on a new page is to make it part of the actual image. Sadly, on my Sony reader, the text looks rather degraded (I'm using PNG images, but assume the reader converts to JPEG.)

I would be so happy to learn of a way to make a text caption always stay with the image --- I have tried putting both in a DIV with pagebreak-inside: avoid, but haven't had 100% success.

Does anyone have a better method to suggest?

Thanks for any input.

gG
GrannyGrump is offline   Reply With Quote
Old 01-26-2012, 08:08 PM   #2
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 14,902
Karma: 5880479
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Quote:
Originally Posted by grannyGrumpy View Post
Finally got free time while the library is open, so I can post!

I have been compiling illustrated ePubs, and it seems like the only way I can be sure the caption doesn't get orphaned on a new page is to make it part of the actual image. Sadly, on my Sony reader, the text looks rather degraded (I'm using PNG images, but assume the reader converts to JPEG.)

I would be so happy to learn of a way to make a text caption always stay with the image --- I have tried putting both in a DIV with pagebreak-inside: avoid, but haven't had 100% success.

Does anyone have a better method to suggest?

Thanks for any input.

gG
One thing that comes to mind:
Scale the images smaller than the Screen height minus ALL margins+caption
Another idea:
Set the image as background-image (Break out the ol'e CSS guide )
and place the caption over the bottom (as normal text)
theducks is online now   Reply With Quote
Old 01-26-2012, 11:16 PM   #3
Jim Lester
Evangelist
Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.Jim Lester is less competitive than you.
 
Jim Lester's Avatar
 
Posts: 416
Karma: 14682
Join Date: May 2008
Location: SF Bay Area
Device: Nook HD, Nook for Windows 8
If you want to go real hardcore - put the image inside of an SVG wrapper, use the same SVG Wrapper to place the caption where you want.
Jim Lester is offline   Reply With Quote
Old 01-27-2012, 01:09 AM   #4
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 9,661
Karma: 5072002
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2
One thing you can do is enclose the image and the caption inside a div statement and provide a css for the statement that includes page-break-inside:avoid. This should cause the page break to occur just ahead of the div section if the image+caption won't fit.

Another thing that might work, but you would have to check for compliance in the target reader is to use the optional "title" attribute for the caption inside the image structure itself.

Last edited by DaleDe; 01-27-2012 at 01:19 AM.
DaleDe is online now   Reply With Quote
Old 01-27-2012, 05:08 AM   #5
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: 506
Karma: 570148
Join Date: Sep 2010
Location: Norway
Device: prs-t1, phone/Cool Reader, tablet/BlueFire, Nook Simple
As mentioned, the failsafe(?) method is to use SVG. For examples of captions on landscape illustrations, see this book.
However, reader SVG support is a bit patchy...
Personally I stick to <div page-break-inside:avoid>, and scale the image so that there is room for the caption below for all sensible font magnifications. For large images you can also have a page-break-before:always.
SBT is offline   Reply With Quote
Old 01-28-2012, 01:22 AM   #6
AlexBell
Wizard
AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.AlexBell ought to be getting tired of karma fortunes by now.
 
AlexBell's Avatar
 
Posts: 2,297
Karma: 3868918
Join Date: May 2008
Location: Launceston, Tasmania
Device: Kindle3, Kobo Touch, Sony PRS T3, Nexus 7, iPad mini
For what it is worth this is what I do to float an illustration to the right and have text flow around it, and give that illustration a caption. As you can see from the comment I got the markup from Elizabeth Castro, in her excellent EPUB Straight to the Point book,

<div class="illustration">
<img src="images/Author.png"
alt="alt text"/>
<p>caption</p>
</div>


div.illustration {
margin: 0 0 0 0.5em; padding: 0;
border: 1px solid black;
width: 50%;
float: right;
}
div.illustration img {
border: 0; margin: 0; padding: 0;
width: 100%;
display: inline;
}
div.illustration p {
margin: 0; padding: 0;
text-align: center;
text-indent: 0;
font-size: smaller;
} /* With thanks to Elizabeth Castro */
div.illustration+p {text-indent: 0;} /* No indent for 1st para after an illustration */

If you want to see the markup in action you could go to any of my ebooks on the MR library - the shortest is The War Prayer by Mark Twain, and the longest is probably The Woman in White by Wilkie Collins
AlexBell is offline   Reply With Quote
Old 01-31-2012, 05:49 AM   #7
GrannyGrump
Persnickity Nitpicker
GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.GrannyGrump ought to be getting tired of karma fortunes by now.
 
GrannyGrump's Avatar
 
Posts: 568
Karma: 2654022
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
Guys, thank you all so much for your responses. You have given me a lot to go on with, this will keep me busy for a few days!

@ jimlester, SBT --- I have used svg Without Caption as a single page (cover, titlepage) but never tried it inline with text, so that will definitely be on my try-it-out list. I had been using a Div with page-break-inside: avoid, but will try the page-break-before: always
as well.
I think I had also failed to place a max width / max height setting to the class.

@ theducks --- I had not thought of the background image method, and will play around with that some.

@ DaleDe -- I have been using such a Div, and I am going to try to also SBT's suggestion to add page-break-before and see if that does any better. The "Title" thing might be a little iffy for a book I plan to upload to the Mobileread Library, but I for sure will try it for personal books on my Sony.

@ alexBell --- I will absolutely delighted to rip off - er, sorry, ADAPT--- your code to see if it works for me.

Thanks to all of you. And thanks for not grumbling at me to search and find an answer somewhere in the forum. This is not how I'm used to being treated as a noob!
GrannyGrump is offline   Reply With Quote
Old 01-31-2012, 12:38 PM   #8
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,199
Karma: 4800739
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Just to note that a <div> with "page-break-inside: avoid" should be enough, as long as the image and caption actually fit in the screen. If a reader adds a page break there when it could move the image to the next page, it's the reader's fault.
Jellby 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
"Insert Image" renames .jpg's incorrectly... but shows the correct image! megacoupe Sigil 4 03-06-2011 08:13 PM


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


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