3 Replies Latest reply on Nov 3, 2016 3:42 PM by Steve Werner

    float image left or right not wrapping correctly

    SueCampbell54 Level 1

      In EPUB 3.00 reflowable, export options. I'm using Anne Marie Concepcion's method from Lynda.com. I've anchored the images left or right. and separately have anchored the captions below them. I have created Object styles for Float left, or float right and assigned them to both the picture box and the caption box. These are anchored separately, one right after the other, since grouping them I know doesn't work. The caption boxes appear as they should with the text wrapping the caption. But the images are appearing above the text not wrapping. It looks correct in the InD file of course, but the CSS must not be applying the wrap to the image—though the alignment is correct.

       

      Do I have to do a separate object style for the image? Both styles at this point say custom, but I think that's because I positioned them manually. The caption is properly not rasterized in the conversion.

       

      Below is a spread with both float left and float right images. The squiggly line is a .png with is is anchored centered, and of course that works fine.Screen Shot 2016-11-01 at 2.38.45 PM.png

      I am using IND CC 2015.1 on a mac running El Capitan 10.11.6

       

      Edited to add: As an experiment, I removed the caption on one of the images. Using the same float right object setting this time the image is wrapped by the text. So it has something to do with having two boxes both with the float setting applied, which makes the text not wrap the first item.

       

      I've rewatched AM Concepcion's video several times. I am doing it exactly the way she does. However, I did notice that in her example the image does not get text wrapped either, only the caption. This leads me to believe it doesn't actually work. So it's looking like if you have float with text wrap applied to two objects in a row it doesn't wrp the first object—which is a sorry state of affairs! Maybe there would be an html work around. But as this book has hundreds of images, I'm not wanting to go that route. It isn't economically feasible. I do see that there are two div sets with the float and clear float applied. as follows:

      <div class="_idGenClearFloat">

        </div>

        <div id="_idContainer001" class="FloatRight  _idGenObjectLayout-2">

        <img class="_idGenObjectAttribute-2" src="image/00BC_Front08.jpg" alt="" />

        </div>

        <div class="_idGenClearFloat">

        </div>

        <div id="_idContainer002" class="FloatRight  _idGenObjectLayout-2">

        <p class="Caption-brown">Hydration packs are available even in small sizes, encouraging kids to drink enough water.</p>

        </div>

       

      I tried mucking about with the float tags tried to combine into one div but I couldn't get it to work. And again, I need a solution that works from Indesign without editing html.

       

      Message was edited by: Sue Campbell

        • 1. Re: float image left or right not wrapping correctly
          SueCampbell54 Level 1

          Arrgh. Still trying to solve this problem. As I knew, grouping the caption with the image and applying the float doesn't really work because the caption gets cut off (even if only one line).

          Screen Shot 2016-11-01 at 5.45.37 PM.png

          It's closer to what I want. But I tried to adjust the CSS with various line height, margins or padding, tags. Nothing seems to keep the text from being cut off. I am not able to find out what it is in the CSS or HTML that does this. (This is in iBooks, my floated images are not even working at all in ADE. They appear huge and half off the "page")

           

          Exporting the image and caption as inline so that the caption is rasterized isn't a good solution either, as the caption gets so small it cannot be read.

           

          If anyone has come close to solving this issue I will bow down and worship you if you tell me how you did it.

           

          I suppose I can just make everything centered and the same size with "jump wrap" but the client will hate it.

          • 2. Re: float image left or right not wrapping correctly
            SueCampbell54 Level 1

            I guess nobody either has this problem, or the answer. I came up with a solution that sorta works, at least in iBooks. There was an overflow:hidden  tag in the CSS on the divs for the grouped captions and images. I removed that tag and then the entire caption will show, BUT now if the caption is very long it overlays/crashes into the text below. Ditto if you increase the text size in iBooks. the image is set to relative to text flow. Because the grouped image and caption seems to be not supported (I'm guessing here.) The div gets exported with this:

            }

            div._idGenObjectStyle-Disabled {

              background-color:transparent;

              border-width:0px;

            Which doesn't seem to do anything. If I remove it from the HTML. It doesn't appear to change anything.

            The book looks "ok" on iBooks. Though any caption longer than a line or two won't work.

             

            After conversion to mobi the images still get cut off on the top or bottom of the screen and these tags:

            page-break-inside:avoid;

            page-break-before:always;

            Don't appear to work at all.

            They do seem to work (mostly) on ibooks.

             

            If anyone has skinned this cat—please help!

            • 3. Re: float image left or right not wrapping correctly
              Steve Werner Adobe Community Professional & MVP

              Moving to InDesign EPUB forum