Image captions --- how to keep with image?

[GrannyGrump]

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

[theducks]

Originally Posted by grannyGrumpy

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)

[Jim Lester]

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.

[DaleDe]

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.

[SBT]

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.

[AlexBell]

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

[GrannyGrump]

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!

[Jellby]

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.