CreativePro Forum

Return to Member Forum

• Author
  Posts
• • March 22, 2018 at 2:19 pm #102589
    Anonymous

    Inactive

    I recently made a reflowable ePUB 3 file in InDesign CC 2018. My client also wanted this for Kindle. The image dimensions were either landscape or portrait. I made 2 different Object styles for the images – 1 for each. Both used Custom Anchoring and both had the image Size dropdown menu to Relative To Textflow (EPUB and HTML). After exporting, I opened the ePUB file in Kindle Previewer 3.2.1.0 to make a mobi file. When i preview in Portrait Orientation, the images look fine, but when I switch to Landscape, the images that were taller in dimension (portrait), are displaying the top half, but cutting off the rest. I made the mobi file and tried to preview in Kindle Reader for PC. All of the images are being stretched to fit the entire preview region. When I turn on page columns, the images are stretched to fit the entire column. However, when I preview on Kindle for iOS on my iPhone 6s+, the images look fine – no stretching, no clipping, regardless if I hold the phone in landscape or rotate to portrait. The original ePUB displays just fine on iBooks for my phone and Readium on my Windows 10 machine.

    Any ideas why I’m getting inconsistent image rendering between the Previewer and Reader for PC?

  • March 23, 2018 at 10:01 am #102597
    Clark Kenyon

    Participant

    Try changing the size to relative to text size in Object Export Options. Getting a reflowable ePub converted to mobi format to display properly on all possible Kindles is probably not possible. It will look beautiful in Kindle Previewer 3, it will look great on your old Kindle Fire reader, but the images will be cut off on your new Kindle Fire reader. I have found that the only way to be fairly certain your images will not be distorted or cut off on Kindle hardware is to specify Size:Relative to Text Size in Object Export Options and scale your images to about 70% of the width of your text block in your layout.

  • March 23, 2018 at 1:04 pm #102598
    Anonymous

    Inactive

    Thanks for your reply, Clark. When I first exported my ePUB I set the size relative to text flow, but my mobi file was clipping my landscape images so they did fit in the viewable area, but it was cutting off the right portion of the picture so I’d get about half – 2/3 of the image displaying. That’s when I switched over to relative to text flow.

    I want to try your suggestion of scaling the pix to 70% and see what happens. When you say 70% of the text block, what is this in relation to exactly? My Indesign doc for reflowable was set to 8.5″ x 11″. I was under the impression that document dimensions didn’t matter because reflowable will just adjust according to the viewport. Another question that comes up is isn’t there a point where if images are too small, won’t they pixelate on a larger Kindle / tablet devices?

  • March 23, 2018 at 2:13 pm #102600
    Anonymous

    Inactive

    Sorry, type-O for the first line – meant to say – When I first exported my ePUB I set the size relative to text size…

  • March 23, 2018 at 3:00 pm #102601
    Clark Kenyon

    Participant

    I don’t know why it should make a difference, but after hours of experimenting and hair pulling I discovered that images that filled the page from margin to margin got cut off, but if I reduced them to 70% of that width, they would display properly. You can determine the width of the text block by selecting your text frame and checking the width in the control panel. Then multiply that by .7. That can make some images pretty tiny, but your readers can always tap on the image for an enlarged version.
    Is it a Kindle problem or an InDesign problem? Kindle readers should automatically scale images to fit whatever screen size you have, but they don’t always do it. I have an old Kindle Fire that displays images just fine. I have a new Kindle Fire that cuts them off on the right if I don’t resize the images.

  • March 25, 2018 at 9:38 am #102607
    Anonymous

    Inactive

    If you saw what I look like, you’d see I don’t have anymore hair to pull out of my head. That said, I want to sincerely thank you for your suggestion of reducing the pix to 70%. It worked! I almost couldn’t believe it when I previewed it in Kindle for PC.

    I think the issue is a Kindle problem and an inconsistent one at that. It seems every other mobile device will readjust the contents according to if you view the device in landscape or portrait mode, whether it’s a website or other eDoc. The more I thought about it, the more I think that this is a text wrapping issue, but it’s being done to images. For example, when you type enough characters on a line, eventually you run out of room, so the characters wrap around to the next line below, and so on. However, when an image is too wide in Kindle, I think it’s trying to wrap the image, which it can’t do, so it ends up stretching it vertically / downwards. I cracked open the mobi file to look at the CSS and saw the img tag having a property of display:inline-block. It only specified a width value. I wonder if height : auto were added would it resize like we’re talking about. I may give that a try.

  • March 25, 2018 at 10:02 am #102610
    Clark Kenyon

    Participant

    See this: https://epubsecrets.com/squished-images-in-kindle-indesign-css-is-the-culprit.php. I tried this fix a couple of times. It didn’t help.

  • March 26, 2018 at 2:19 pm #102640
    Christopher Panny

    Member

    Interesting article. I tried that trick but applied auto to the height and left the width to 100%. I didn’t get any better results.

    I have this same issue posted on adobe’s indesign epub forum. I got an interesting remedy that I’m about to try. The short end of it is:

    1 – Apply inline images
    You can start to apply images inline (inside text frame) instead use custom anchoring

    2 – Use VH unit
    For portrait images is a better choice use VH (viewport height) as unit instead %, like this

    img {height: 98vh;}

    3 – Media query
    Have you try repeat or change some CSS properties only for Kindle readers. You must use media query

    @media amzn-kf8 {
    img {height: 98vh;}
    }

  • March 26, 2018 at 3:53 pm #102641
    Clark Kenyon

    Participant

    Another way to avoid the truncated images is to set up your document so that your page size (or at least the width of the text block, i.e., column) is as close as possible to the size of a Kindle screen. This won’t work if you intend to export both print and ePub from the same layout and it’s 8.5 x 11.

• Author
  Posts