CreativePro Forum

Return to Member Forum

• 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
    Anonymous

    Inactive

    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