CreativePro Forum

Return to Member Forum

• Author
  Posts
• • October 10, 2014 at 6:06 am #70962
    Elisabeth Straumoey

    Member

    Hello! I have been generating and validating an epub with a fair amount of anchored images, and generated mobi-files through the Kindle Previewer – and everything looked like it should. Now, however, whenever I generate a new epub and mobi (validated), the images get way stretched in Kindle Fire (they get much higher than they should be, looks like they are forced to display full height to fill the screen regardless of the width). The same happens in a Samsung Galaxy tablet but everything looks dandy in iBooks on the iPad + iPhone.

    I can’t see how I can have touched anything to affect this along the way – I don’t know how it suddenly could start behaving like this. :( Since it started going wrong with the images, Kindle also only opens the file on Foreword, not on the front page.

    A few examples from image containers in the CSS (I tried adding height:auto; without any luck):

    #_idContainer020 {
    display:inline-block;
    width:62.67%;
    }
    #_idContainer022 {
    display:inline-block;
    width:61.54%;
    }
    #_idContainer023 {
    height:99.92%;
    left:0%;
    position:absolute;
    top:0.08%;
    width:47.84%;
    z-index:1;
    }
    #_idContainer024 {
    height:99.92%;
    left:52.16%;
    position:absolute;
    top:0%;
    width:47.84%;
    z-index:0;

    Most of the images have this kind of formatting:

    #_idContainer035 {
    display:inline-block;
    width:76.37%;
    }
    #_idContainer037 {
    display:inline-block;
    width:54.08%;
    }
    #_idContainer038 {
    display:inline-block;
    width:31.02%;
    }

    I am at my wit’s end and hoping someone here might be able to help me. Beforehand, thank you! :)

  • October 10, 2014 at 11:30 am #70976
    Aaron Troia

    Participant

    Yeah I usually have to go into my InDesign exported ePubs and fix up the code on images. I normally set my images to be centered and, if possible, stretch the width of the page, unless I’m floating or something else, but this gives me a good base and a starting point to do more if need be. you might try this and see if it works for you. This also works on the iPad, though for centering issues, you would need to wrap the tag in an empty span tag.

    CSS:
    .center {
    text-align:center;
    margin:0;
    text-indent:0;
    }
    img {
    width: auto;
    max-width: 100%;
    }
    div.image {
    text-align:center;
    }

    HTML:
    <div class=”image”>
    
    </div>

    Kindle also requires a guide start location as it will not, and cannot be set to, open to the cover, so if your forward is the first text file after the cover, its probably a good chance this is the reason. You can set up a guide section in the OPF file to direct the ereader to open to another part of the book, as long as it is not the cover. You would also need to set an id=”start” in one of your tags in your file as well.

  • October 13, 2014 at 2:09 am #71013
    Elisabeth Straumoey

    Member

    Thank you so much for your reply! :) Since my distorted image-problem didn’t seem to make any sense I decided to make a new InDesign-document and copy the text and anchored images into it. Now the images render correctly in Kindle. The ones that are too high get squashed when I flip the screen to read horizontally but I don’t think I can afford the time to try to fix that.

    New errors keep turning up, though – now hyperlinks don’t get generated in the epub even though they look green and lovely in my hyperlinks-panel. InDesign just gives me an empty http://www.hyperlink.com for some reason. Happily there aren’t TOO many links in the document so I think I’ll just have to fix those manually.

    Going to try to figure out Kindle’s cover image and guide-stuff in a bit …

    Here’s hoping nothing else weird happens! Cheers!

• Author
  Posts