Non rectangular shapes

[rubeus]

Hi,

i read in the codesnippets

https://www.mobileread.com/forums/sho...10&postcount=5

how to float text around a non rectangular shape.

So i just sliced the shape into 6 parts and stacked them to the right using float.

Everything looks fine - in Sigil, but not in ADE. Even reading the following posts dealing with that i was not able to achieve this floating. In Ade the most right slice is ok, but the following do all have a top margin where i dont know where it comes from.

Has someone an idea on how to achieve that? I've attached an epub with my trials in section 1.

//rubeus

[RbnJrg]

Originally Posted by rubeus

Hi,

i read in the codesnippets

https://www.mobileread.com/forums/sho...10&postcount=5

how to float text around a non rectangular shape.

So i just sliced the shape into 6 parts and stacked them to the right using float.

Everything looks fine - in Sigil, but not in ADE. Even reading the following posts dealing with that i was not able to achieve this floating. In Ade the most right slice is ok, but the following do all have a top margin where i dont know where it comes from.

Has someone an idea on how to achieve that? I've attached an epub with my trials in section 1.

//rubeus

Please, read these threads (read all posts):

https://www.mobileread.com/forums/sho...d.php?t=213715

and

https://www.mobileread.com/forums/sho...60#post2821660

There you'll be able to see my aproximations to solve your issue.

Regards
Rubén

[rubeus]

Hi, thanks for showing more postings, but at least i'm too dumb to ust mirror the L from the left side to the right side. Can some enlighten me, please?

First section in the appendix is the original solution, second my try.

[RbnJrg]

Originally Posted by rubeus

Hi, thanks for showing more postings, but at least i'm too dumb to ust mirror the L from the left side to the right side. Can some enlighten me, please?

First section in the appendix is the original solution, second my try.

Well, one way to get what you want is:

1. In your .css stylesheet use:

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

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

img.ToRight { /* this class is to align the image toward the right side */
  margin: 0;
  text-indent: 0;
  padding: 0;
  float: right;
}

2. In your .xhtml file use:

<p>Lorem ipsum dolor sit amet, consectetur 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 class="ToRight" alt="" height="300" src="../Images/UpsideL.png" width="200" /></div>

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

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus.</p>

Below you can see a screenshot of my ADE:



I also attach the respective .epub

Regards
Rubén

[rubeus]

Thx that solved my problem

[rubeus]

Hi,

i need to dig this out again. I've problems with the normal L lefthanded and righthanded. The upside dow versions are ok.

I tried a lot of things with slicing and negative margins, and i achieved some solutions. But none of them are working in ADE 2.0. I know the examples in the epub snippets sticky thread, but im unable to make them work in ADE 2.0 or based on RMSDK readers, Can somebody help me?

//rubeus

[RbnJrg]

Originally Posted by rubeus

Hi,

i need to dig this out again. I've problems with the normal L lefthanded and righthanded. The upside dow versions are ok.

I tried a lot of things with slicing and negative margins, and i achieved some solutions. But none of them are working in ADE 2.0. I know the examples in the epub snippets sticky thread, but im unable to make them work in ADE 2.0 or based on RMSDK readers, Can somebody help me?

//rubeus

Sorry but I'm afraid you can't get what you want in ADE 2.0 ADE 2.0 -and also ADE 3.0- have problems to manage the property "float" to display images in a normal "L" layout.

[rubeus]