Keep captions on same page as image reflowable epub
Learn / Forums / EPUB and eBook / Keep captions on same page as image reflowable epub
Tagged: keep captioin with image, reflowable epub
- This topic has 6 replies, 4 voices, and was last updated 5 years, 5 months ago by beppegrafo.
-
AuthorPosts
-
-
August 15, 2018 at 1:59 pm #109682Grace PeirceMember
Hello — how do you keep the image captions on the same page as the image? Reflowable Epub v 3.0. Right now the images are anchored in the text and flow along with it. And captions are also in the text flow, underneath the image, all in one text story. I used style sheets diligently and the epub exports, validates, and looks great, except for sometimes the caption appears on the page after the image. I know CSS and how to use Sigil – is there something I can do in the CSS? I do have an object style applied to the images too.
thanks in advance,
Grace -
August 15, 2018 at 2:13 pm #109683Rick LePageParticipant
I would use objects (and Object Styles) to group captions and images together in one box, which should keep them together on epub export. It should wrap the image and the captions (and the classes specified in the Object Styles export section) in a set of divs that set them off from the text.
At some point, the images and the text might get separated, due to changing fonts/sizes, but for the most part, your image and caption should be together.
Others with more experience might join in, especially on finessing things, but this is the type of code I have in my current book:
<div id=”_idContainer087″ class=”figure _idGenObjectStyle-Disabled”>
<div id=”_idContainer085″ class=”figure”>
</div>
<div id=”_idContainer086″ class=”figure”>
<p class=”FigureCaption”>Figure 1: The eye is a lot like a camera. It focuses light with a lens, controls exposure with an iris, and has an imaging medium, the retina.</p>
</div>
</div> -
August 15, 2018 at 2:21 pm #109686Rick LePageParticipant
Sorry that my HTML got screwy — the IMG line was wonky, and I can’t re-edit it.
You probably could go in and tweak the HTML to do this without having to go back into ID. On my first book, that’s what I ended up doing throughout to clean up the HTML, and make things cleaner.
Rick
-
August 15, 2018 at 2:24 pm #109687Grace PeirceMember
Thanks, Rick – wondering what the CSS looks like for this too? I’ll experiment and see.
-
August 15, 2018 at 2:28 pm #109688Aaron TroiaParticipant
Grace,
Wrap your image and caption in a div/figure tag and use
page-break-inside: avoid;
in your class. -
August 15, 2018 at 2:30 pm #109689Grace PeirceMember
thanks Aaron – will give it a shot!
-
October 24, 2018 at 9:55 am #111124beppegrafoMember
Hello. I tried and it works. But when I enlarge the text with an e-reader, the captions are cut or some lines disappear…
-
-
AuthorPosts
- You must be logged in to reply to this topic.