2 Replies Latest reply on Aug 1, 2011 7:22 AM by Kratos27

    Help with Liz Castro solution to iBooks bug when resizing images in epub for iPad

    Kratos27 Level 1

      Hi everyone.

      I'm creating an epub for iPad with with small images that will expand when they are tapped. I have read Liz Castro's book and blog article and have learnt about the bug with iBooks and the solution, which as a HTML novice I found difficult to understand.  It has taken me a while to get it working but I just wanted to share my (imperfect) progress for any other laymen or laywomen and to ask for some help!

       

      In my template.css I just added this

       

      div.group {
      width:50% !important;
      }
      img {width:100%;

       

      and in each of my html chapters where there is an image, I removed the img src reference that was automatically generated by Indesign and added this...

       

      <div class="group">
      <img src="exampleimage.jpeg" alt="This is an example" />
      </div>

       

      I rezipped my files, transferred to my iPad and the images appear small and expand when double-tapped. Fantastic! Credit to Liz Castro. This is a big step closer.

       

      But it's not perfect. I would like my image to be centrally aligned and for there to be some space between the text and the image. My images are now aligned to the left, and there is no space between them and the text preceding and following them, so it looks messy on the page. Before I changed the code this worked fine, after I changed it it doesn't work. When I originally exported the InDesign file, on the Image tabIe set the spacing the Centre, and added 2ems to the image, and ticked the box for Insert Page Break before and after a page break.

       

      To remedy this I added the following to the div.group in the css

       

      text-align : center;

      margin-top : 2em;

      margin-bottom : 2em;

       

      When I converted it back to an epub I saw It didn't centre the image but there was a margin at the top and bottom. Whilst the file opens in Sigil problem  it wont transfer to iBooks on the iPad, which I believe means there is a coding error.


      Does anyone know how I can centre the image and add some spacing between it and the text?

       

      Any help would be ultra appreciated.

        • 1. Re: Help with Liz Castro solution to iBooks bug when resizing images in epub for iPad
          davidgrayco Level 1

          Some things to consider:

           

          1. Centering and space above and below your div can be accomplished in CSS with:

           

          div.group {
          width:50% !important;

          margin-top: 1.0em;

          margin-bottom: 1.0em;

          text-align: center;}

           

          There might be other and better ways to accomplish this. I'm not expert in CSS or HTML; I only know what has worked for me in previous projects.

           

           

          2. In iBooks, there is a bug (or "feature") that causes iBooks to ignore text-align for some elements (such as <p>) if iBooks' preferences are set to Full Justification = ON. Instead of being centered, those elements will be left-aligned (or maybe justified? I haven't tested.) This is the default setting, so most users likely leave it that way. (<h> elements are not affected by this bug.)

           

          This is detailed in one of Liz Castro's blog posts and also on Walt Shiel's blog:

           

          http://www.pigsgourdsandwikis.com/2010/06/beating-ibooks-bugs.html

          http://waltshiel.com/2010/06/23/one-solution-to-ibooks-1-1-centering-problem/

           

          One fix is to wrap the text inside such an element in empty <span> tags.

           

           

          3. I don't know what your intended audience is, but keep in mind that iBooks is way behind Amazon and BN.com in terms of sales volume. Kindle and Nook don't support resizing images (yet, anyway), so unless your book depends on this photo treatment to deliver its message, you might be putting a lot of time and effort into a feature that few readers (yet, anyway) can take advantage of.

           

           

          4. If you use Twitter, you might want to follow the hashtag #eprdctn -- it's used by a small community of ebook designers to exchange information about the constantly changing ebook design world.

           

          5. Other good sources of info:

           

          http://ebookarchitects.com/

          http://www.kindleformatting.com/ (I know it's not iBooks-related, but it's full of good info)

          • 2. Re: Help with Liz Castro solution to iBooks bug when resizing images in epub for iPad
            Kratos27 Level 1

            Thank you David for taking the time to offer such helpful assistance and helped me understand the issue a little more clearly.

            The iBooks version of epub has some noticable differences to standard  epub which is the cause of these issues. It would be very helpful if the  next InDesign update can take account of this and offer an 'export to iBooks epub' option' wouldn't it? It would be especially helpful to non-CSS experts who use InDesign for its ease of use. I will make sure my next project is not iBooks specific, Kindle definitely will be a lot less headache.

             

             

            From the internets I've learnt I can center text by doing this

             

            <div style="text-align: center;">

            <span>

            This is my centered text

            </span>

            </div>

             

             

            But I want a centered image. So I  replaced the text line with my image code line, but it doesn't show as centered.

             

            <div style="text-align: center;">

            <span>

            <div class="group"> <img src="exampleimage.jpeg" alt="This is an example" />  </div>

            </span>

            </div>

             

            Or if i put the image code without div class reference then the image seems centered but is not a reduced size (which I want) because there is no reference to the div class in the css which tells it to display smaller.

            <div style="text-align: center;">

            <span>

            <img src="exampleimage.jpeg" alt="This is an example" />

            </span>

            </div>

             

             

            So what I want to do is have the image appear small, and be centered. There is a way around this!

            Any ideas please let me know.

            Thank you.