CreativePro Forum

Return to Member Forum

• Author
  Posts
• • August 25, 2012 at 4:53 pm #62979
    Chris Benge

    Member

    I've been having trouble with captions pushing onto the next iPad/iBooks page beneath large images in the ePub I've created. In Real World Adobe InDesign CS6 the writing team recommends that we “do not group the caption with the image and anchor the group. Instead, anchor both to the same place, the image followed by the caption”. Why is this recommended? Does it have anything to do with keeping the image and its caption together?

    On this same issue, is Liz Castro's comment in her Straight to the Point book still current? She says that:

    “The iBooks app doesn’t currently support the standard CSS page element controls,

    like page-break-before, page-break-after, and page-break-inside. Neither does it

    support the standard CSS orphans and widows properties that can keep individual

    lines from appearing at the top and bottom of pages.”

    Has there been any change to this info since it was written?

  • September 3, 2012 at 10:21 am #63047
    lasatalayas

    Member

    Group the Image & Caption, Export to JPG, then replace the Group with JPG.

  • October 11, 2012 at 11:19 am #63326
    Gail Sands

    Member

    I've been struggling with this too. The problem with grouping the caption with the image and converting to jpg is that the caption copy gets rasterized and pretty much unreadable.

  • October 11, 2012 at 1:47 pm #63330
    Laras

    Member

    I scale tall portrait images to a smaller percentage of the screen so as to create enough space for the caption. It's not a great solution and the iPad has a much shorter page than the Kindle Fire, say, but it usually works. I often create a page-break-before the image if more than one image is sneaking onto the page and cropping the second caption.

  • October 12, 2012 at 9:24 am #63343
    Anne-Marie Concepcion

    Member

    Keeping images and captions together is crazy-making in epubs. I would *not* recommend rasterizing the image and caption together; almost all the ebook resellers caution you against that (and could make them reject your book) because the rasterized caption text is not searchable or selectable, and they get a lot of user complaints about it.

    For the iPad, try enclosing your picture and caption in a div, and assign a “nobreak” style to that:

    In the HTML:

    <div class=”nobreak”>

    <img src=”/images/San_Fran%2C_1822_fmt.jpeg” alt=”San_Fran1822.jpg”/>

    alt=”San_Fran1822.jpg”>

    <p class=”caption”>View of Presidio of San Francisco circa 1817 by Louis Choris</p>

    </div>

    In the CSS:

    .nobreak {

    page-break-inside: avoid;

    }

    Be careful because InDesign will add a bunch of divs to anything that's anchored. So test, and if necessary, prune unnecessary <div> </div> pairs.

    AFAIK there's no way to set a “keep together” for Kindle devices. All you can do is set a page break before to force something to the top of a page.

    AM

  • December 3, 2012 at 8:06 am #63665
    Liang

    Member

    …and if you have several images + captions to keep together, in InDesign you can group the images and captions, assign a named object-style and InDesign will create the divs for you with the object-style name given as a div class to which you can apply the CSS rule. See here.

    I have found that the page-break-inside:avoid; method works to keep images and captions together UNLESS an image has a taller aspect ratio as well as a taller native height than the page. In this case, iBooks ignores page-break-inside:avoid; and scales the image to 100% of the available page height thus forcing the caption onto the next page. Can anyone suggest how I might get around this?

    I have tried applying max-height:100%; to the div but no joy. I've read on another forum that a SVG wrapper might work but I'd prefer to exhaust all the relevant basic CSS rules before exploring that route.

    Cheers.

• Author
  Posts