Keep captions on same page as image reflowable epub

Grace Peirce

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.

Viewing 6 reply threads

Author

Posts
- August 15, 2018 at 1:59 pm #109682
  
  Grace Peirce
  Member
  
  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 #109683
  
  Rick LePage
  Participant
  
  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 #109686
  
  Rick LePage
  Participant
  
  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 #109687
  
  Grace Peirce
  Member
  
  Thanks, Rick – wondering what the CSS looks like for this too? I’ll experiment and see.
- August 15, 2018 at 2:28 pm #109688
  
  Aaron Troia
  Participant
  
  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 #109689
  
  Grace Peirce
  Member
  
  thanks Aaron – will give it a shot!
- October 24, 2018 at 9:55 am #111124
  
  beppegrafo
  Member
  
  Hello. I tried and it works. But when I enlarge the text with an e-reader, the captions are cut or some lines disappear…
Author

Posts