Bird display on the side of a text page

[mrmikel]

Still no joy in Mudville...increase the size to medium in the Sony Reader. It is ok on the original page, but it appears again on the following one over the text....Argh!

[RbnJrg]

Originally Posted by roger64

@RbnJrg

Hi Jorge

Thanks so much for your help. I have really spent hours trying to do it and had given up. Your EPUB looks good. I will study it closely and look how it displays on Kobo and later how it goes to PDF with Prince.

ADE is OK. Prince too. The only thing, Kobo does not agree (text mixes with image), but Kobo is backward on so many fields with formatting, I find it hardly surprising.

The code cannot be more compact and clearer. Use of background, background-size (I noted for this one to be careful) and boxes is really very convenient.

Hi Roger;

Many thanks for your words; nice to know that the code could help you. But maybe the code could be a bit simpler (and compact) If we work with an image in two sections, then we could get something like the following:

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

.float_left {
  clear: left;
  float: left;
}

And in the .xhtml file we could use:

<p>...something...</p>
<p><img class="float_left" alt="" src="../Images/bird1.jpg" /></p>
<p><img class="float_left" alt="" src="../Images/bird2.jpg" /></p>
<p>...something...</p>

Precaution: Apply the class "float_left" inside the <img> tags and not inside the <p> tags.

It works in ADE (with any font size) and maybe this solution also could work in Kobo

Regards
Rubén

[RbnJrg]

Originally Posted by mrmikel

Still no joy in Mudville...increase the size to medium in the Sony Reader. It is ok on the original page, but it appears again on the following one over the text....Argh!

Try this alternative solution:

[mrmikel]

This solution works, but introduces a line through the tail. No doubt an artifact from the rendering engine....

[roger64]

Originally Posted by RbnJrg

Try this alternative solution:

Jorge

This time, even Kobo agrees. And you're right, the code is even simpler. Just cut out the bird (or whatever) and serve. It's done.

Thanks for a masterful - and very useful lesson -. I really think that this is the way to go. I am pretty sure this trick will prove very popular!!

[RbnJrg]

Originally Posted by roger64

Jorge

This time, even Kobo agrees. And you're right, the code is even simpler. Just cut out the bird (or whatever) and serve. It's done.

Thanks for a masterful - and very useful lesson -. I really think that this is the way to go. I am pretty sure this trick will prove very popular!!

You are welcome Glad to have been able to help you.

[jbacelar]

Jorge, or others.

Can you fix this?
Thanks in advance.

[RbnJrg]

Originally Posted by jbacelar

Jorge, or others.

Can you fix this?
Thanks in advance.

Hi jbacelar;

Very curious; it seems that is a bug (a new one?) of ADE. It works fine in Sigil, Azardi, EpubReader, and in my Kindle but not in Sony Reader and Nook Reader. Still I couldn't find a workaround for this issue

[Sabardeyn]

Okay, maybe it's not relevant, but it's such a good straight-line...

Just flip the bird!

On the other hand, if you get desperate, it just might work.

[Jellby]

Do you have a negative height or something?

[jbacelar]

Originally Posted by Jellby

Do you have a negative height or something?

It is the same Parrot2.epub, with the images reversed and changed order.

[RbnJrg]

Originally Posted by jbacelar

It is the same Parrot2.epub, with the images reversed and changed order.

Yes; but the problem is ADE. I can't understand why the first part of the image (the parrot's tail) is in the background.

[Sabardeyn]

Actually, both portions of the bird are in the background with the text overwriting the images. Carefully looking at the blue circle near the claws and tail reveals the circle is being overwritten by text.

As for the image and negative values... some programs will allow you to enter values which will cause images to flip without actually changing the image in an art program in any way. If the problem is a negative value, correcting it might at least have the bird right-side-up. This negative number could be an actual negative number (ie, -53) or a number that exceeds the max allowed (ie, Enter a number between 1-90: 127).

[jbacelar]

Sorry Sabardeyn. I recommend you read this thread from the beginning, so that you can understand that we are talking about here.

[RbnJrg]

Originally Posted by mrmikel

Still no joy in Mudville...increase the size to medium in the Sony Reader. It is ok on the original page, but it appears again on the following one over the text....Argh!

Well, I found a solution that works in ADE with ANY FONT SIZE (in Sigil looks ugly but in ADE is great).

In the stylesheet:

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

.parrot {
  background: url(../Images/bird.jpg) no-repeat top left;
  background-size: 183px 307px; 
}

.box1 {
  float: left;
  width: 183px;
  height: 195px;
}

.box2 {
  clear: left;
  float: left;
  width: 60px;
  height: 100px;
}

And in the .html file:

  <p>...some text..</p>
  <div class="parrot">
    <p class="box1"></p>
    <p class="box2"></p>
    <p>...some text..</p> /* Very important: the paragraph must be short */
  </div>

The epub validates at FlightCrew and Epubcheck.

Still I couldn't find a solution (for ADE, in Kindle there is no problem) for the inverse case, when the small box is the first one. ADE has bugs with the float property and I couldn't find a workaround so far.

Regards