Text wrap around irregular shapes

[Doitsu]

I had a look at Zelda Pinwheel's excellent ePub edition of "Three Men in a Boat" and noticed that she managed to wrap text around an upside-down L shaped image (without splitting the image into two parts and without spacers) using only two divs (boat006_ch03.xhtml; pg040.gif).
Unfortunately, Zelda doesn't seem to visit MR anymore.

The HTML code is:

<div class="leftpic" id="ocean"><img alt="" src="../Images/pg040.gif" /></div>
    <div class="leftpic"></div>

The CSS code is:

  div.leftpic {
  float: left;
  clear: left;
  text-align: left;
  margin: 0 0.5em 0.5em 0; 
}
  div.leftpic img {
  width: 100%;
  display:block;
}

div#ocean {
  width: 206px;     
  height: 109px;
}
	
div#ocean + div.leftpic {
  width:143px;
  height: 282px;
  margin-top: -0.5em;
}

(The image dimensions are 206x397px.)

Can someone please explain to me how Zelda Pinwheel arrived at the numbers for the divs and how one could recycle the code for upside down and regular L shaped images?

Alternatively, what ADE compatible CSS would you use to wrap text around my similarly shaped test image? (The text should be displayed right of the black parts of the image and on top of white parts of the image.)

The image dimensions are 200x300px; the dimensions of the white box in it are 120x200px (80px from the left, 100px from the top).

[Toxaris]

I don't think it actually works anymore with the newer versions of ADE, but I am not sure.
The numbers should be related to the real picture. Wasn't there a old thread about this that explained it? Hmm...

*Update* It was in the epub snippet thread: https://www.mobileread.com/forums/showthread.php?t=46448

[RbnJrg]

Hi Doitsu;

Sometime ago I had posted a solution based in two boxes; I have adapted that solution to your present request.

1. In your .css stylesheet write the following:

p {
  text-align: justify;
  margin: 0;
  }

.Box1 {
  float: left;
  width: 210px; /* 200px + 10px for right margin */
  height: 100px;
}

.Box2 {
  clear: left;
  float: left;
  width: 90px; /* 80px + 10px for right margin */
  height: 200px;
}

As you can see, the height of the two boxes adds 300px (the height of your image). The width of the first box is the width of the wide part of your image plus a right margin (in this case I use 10px but of course, you can use what you like). The width of the second box is the width of the thin part of your image plus the right margin.

In the .xhtml file you should write:

  <p>Lorem ipsum dolor sit amet, conectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Sed at velit nisl.</p>

  <div class="Box1"><img src="../Images/UpsideL.png" alt="" /></div>

  <div class="Box2"></div>

  <p>Lorem ipsum dolor sit amet, conectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Sed at velit nisl.</p>

That's all In ADE works nice; here you can see a screenshot:



Below you can check the respective .epub

Regards
Rubén

[Toxaris]

If I recall correctly, it might be that some readers put a white space between the images. Then again, I may have amnesia...

[RbnJrg]

Originally Posted by Toxaris

If I recall correctly, it might be that some readers put a white space between the images. Then again, I may have amnesia...

Hi Toxaris;

Yes, that was the problem with my solution based in two images (in Sony readers). But this time I used only one image So, no white space between images because in this case there is just one. And if there is a space between the two boxes, it doesn't matter because the boxes are transparent

Regards

[Jellby]

You could check Tom Sawyer. I think my solution there is a bit different.

[AlexBell]

I wonder if I might suggest that whatever solution is used it be checked on an Apple. It may be the the whole image is reduced to a tiny dot - at least with iBooks.

[Doitsu]

Originally Posted by AlexBell

I wonder if I might suggest that whatever solution is used it be checked on an Apple. It may be the the whole image is reduced to a tiny dot - at least with iBooks.

Unfortunately, you're right. Neither Rubén's code nor the code used by Zelda and Jellby worked with the current IOS and OSX versions of iBooks. On the plus side, Rubén's, Zelda's and Jellby's image wrapping code worked without any changes in KF8/AZW3 Kindle books. (For a full KF8 conversion only the drop caps code would need to be adjusted, but that's a known KF8 "feature".)

@Hitch: There's no fallback code required for Mobi7-only Kindles. The image is being displayed left-aligned with lots of white-space right of it. Not very pretty, but, IMHO, acceptable.

[RbnJrg]

Hi Doitsu;

Try using:

<div class="Box1"><img width="200" height="300" src="../Images/UpsideL.png" alt="" /></div>

<div class="Box2"></div>

It seems that iPad -by default- gives the image the size of a line. Maybe we must specify its size to solve the issue.

Regards

EDIT: By the way, you could use my primitive "solution" that works on iPad and Kindle (but it has some issues under ADE):

https://www.mobileread.com/forums/sho...55&postcount=9

Also read the post #13 of that thread.

[Doitsu]

Originally Posted by RbnJrg

It seems that iPad -by default- gives the image the size of a line. Maybe we must specify its size to solve the issue.

Unfortunately, adding height and width parameters didn't make a difference. However, this is not a problem for me, because I only read ebooks on my K3, my Kindle apps and ADE-compatible apps.

Thanks also for the link to your parrot epub, which does work with iBooks.

                  

[RbnJrg]

Originally Posted by Doitsu

Unfortunately, adding height and width parameters didn't make a difference. However, this is not a problem for me, because I only read ebooks on my K3, my Kindle apps and ADE-compatible apps.

Thanks also for the link to your parrot epub, which does work with iBooks.

                  

You are welcome!

[RbnJrg]

Originally Posted by Doitsu

Unfortunately, you're right. Neither Rubén's code nor the code used by Zelda and Jellby worked with the current IOS and OSX versions of iBooks...

I was thinking a bit regarding this problem and maybe I found something

In the .xhtml file goes:

<div class="Box1"><img width="200" height="300" alt="" src="../Images/UpsideL.png" /></div>

<div class="Box2"></div>

And in the css stylesheet:

p {
  text-align: justify;
  margin: 0;
}

.Box1 {
  float: left;
  width: 90px; /* widht of the vertical part of the "L" + 10px for right margin */
  height: 300px; /* height of the image */
}
	
.Box2 {
  float: left;
  width: 120px; /* width of the horizontal part of the "L" */
  height: 100px; /* height of the horizontal part of the "L" */
}

Could you (or you, Alex) test the epub attached to this post in iPad to see how does it work? In ADE looks fine.

[Doitsu]

Originally Posted by RbnJrg

Could you (or you, Alex) test the epub attached to this post in iPad to see how does it work? In ADE looks fine.

Unfortunately, this version doesn't work either, which is kind of odd, because, AFAIK, both the Kindle and iBooks apps use Webkit-based rendering engines.

Maybe it's time to throw in the towel. After all, Apple device users can always install other apps that behave in a more predictable way.

Anyway, I really appreciate your efforts.

[RbnJrg]

Originally Posted by Doitsu

Unfortunately, this version doesn't work either, which is kind of odd, because, AFAIK, both the Kindle and iBooks apps use Webkit-based rendering engines.

Maybe it's time to throw in the towel...

OK

[AlexBell]

Originally Posted by RbnJrg

Could you (or you, Alex) test the epub attached to this post in iPad to see how does it work? In ADE looks fine.

Sorry I'm late getting back, but I'm in a different time zone.

I've tested your epub in iBooks and Marvin, and as Doitsu said it doesn't work. But it's interesting that it fails in different ways between iBooks and Marvin. I'm afraid I don't know how to produce screenshots, so I'll try to describe the results.

- with iBooks Lorem ipsum and two lines following is shifted to the right, by a distance 2-3 times the width of the top bar of the image. The next line is still shifted to the right, but only as far as the edge of the top bar, and is level with the bottom of the vertical bar. The next five lines are shifted to the right at the same level, so that there is a big white space below the image.

- with Marvin the image looks quite different; the horizontal part of the L is much thicker than the image with iBooks, and much narrower. The vertical part of the L is narrower, and much taller. The text next to the horizontal bar is again shifted to the right, so that there is a white space about 2.5 times the width of the horizontal bar and extending down to the bottom of the horizontal bar. The text from the bottom edge of the horizontal bar to the bottom edge of the vertical bar is shifted to the right level with the right edge of the horizontal bar - there is no white space below the image

It looks to my ignorant eyes that there is not only an iPad problem, but also an iBooks versus Marvin problem.