![]() |
#1 |
Obsessively Dedicated...
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,200
Karma: 34978132
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 |
![]() |
![]() |
![]() |
#2 | |
Well trained by Cats
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 30,257
Karma: 57979022
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
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) |
|
![]() |
![]() |
Advert | |
|
![]() |
#3 |
Evangelist
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() 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.
|
![]() |
![]() |
![]() |
#4 |
Grand Sorcerer
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
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. |
![]() |
![]() |
![]() |
#5 |
Fanatic
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 580
Karma: 810184
Join Date: Sep 2010
Location: Norway
Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad
|
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. |
![]() |
![]() |
Advert | |
|
![]() |
#6 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,413
Karma: 13369310
Join Date: May 2008
Location: Launceston, Tasmania
Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet
|
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 |
![]() |
![]() |
![]() |
#7 |
Obsessively Dedicated...
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 3,200
Karma: 34978132
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! ![]() |
![]() |
![]() |
![]() |
#8 |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,526
Karma: 19000001
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.
|
![]() |
![]() |
![]() |
|
![]() |
||||
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 |