Image sizes and text alignment

[HeartWare]

Originally Posted by Turtle91

If the Lorem ipsum text is just normal paragraph text then it should easily work with:

div.image50L {width:50%; float:left}
div.image50L img {width:100%; max-width:1000px}

<p>Some paragraph before the image.</p>
<div class="image50L"><img alt="…" src="…"/></div>
<p>Some paragraph the will flow around and to the right of the image.</p>

Try that with the colored border and the image should be the only thing with the red border.

Nope. That doesn't work. However, if I exchange the 50% and the 100% and include a text-align:left it works in Sigil and Calibre, but not on my Android tablet:

div.image50L {width=100%; border: 1px solid red}
div.image50L img {width:50%; max-width: 9000px; float:left; text-align:left; padding: 0px 8px 0px 0px}

and the .xhtml the same as above.

Also, the red marker in Sigil is above the image, and covers the entire width (no red visible below the image, so it seems like the <img> is not contained within the <div>)

[Turtle91]

I’m glad you got it to work
You can use multiple selectors and combine them separately.

.L {float:left}
.R {float:right}

.s50 {width:50%}
.s33 {width:33%}

<div class="R s50">
<div class="L s33">

[HeartWare]

Originally Posted by Turtle91

I’m glad you got it to work
You can use multiple selectors and combine them separately.

.L {float:left}
.R {float:right}

.s50 {width:50%}
.s33 {width:33%}

<div class="R s50">
<div class="L s33">

That doesn't work :-)

But I get an interesting effect - the image is shown at full resolution (so is wider than the viewport) and the text is within the image :-) at the distance from the left side as defined by the S-selector.

[HeartWare]

Originally Posted by Turtle91

I’m glad you got it to work

Unfortunately, it doesn't work on my eBook reader on my tablet - but that might be a difference in interpretations of the .css

However, I'm "concerned" that both Sigil and Calibre shows the red border to be full width "above" the image, so I'm not sure that it interprets the hierarchy correctly (or we define it incorrectly).

[RbnJrg]

Originally Posted by HeartWare

Okay, with the combined help of all of you, I managed to get it to work:

.css file:

.image50L {width=100%}
.image50L img {width:50%; max-width: 9000px; text-align:left; float:left; padding: 0px 8px 0px 0px}

.xhtml file:

<div class="image50L"><img alt="Tropical Beach" src="../Images/Tropical%20Beach.jpg"/>Lorem ipsum dolor sit amet, consectetur ... id est laborum.</div>

I can certainly make a bunch of classes and other stuff in the .css file, but do I need to specify both lines for all combinations of alignment and percentage size? Ie. I need a several combinations of L and R alignment (not at the same time, obviously :-) ) and varying percentages.

In the solution I proposed the text inside the div IS enclosed with <p> tags; do that and it should work everywhere. By the way, what Is your ebook reader?

[RbnJrg]

Well, now I am home and I have more freedom to write you. There are -at least- three ways to get what you want:

First Method:

a) In your .xhtml file:

    <p><img class="fl" alt="Tropical Beach" src="../Images/Tropical%20Beach.jpg"/>Lorem ipsum dolor sit amet, consectetur ... id est laborum.</p>

b) In your .css file:

img.fl {
    float: left;
    with: 100%;
    max-width: 9000px; /* This property is not well supported under epub2 */
    padding: 0 0.5em 0.5em 0;
}

Second Method:

a) In your .xhtml file:

    <div class="image50L>
         <img alt="Tropical Beach" src="../Images/Tropical%20Beach.jpg"/>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur ... id est laborum.</p>

b) In your .css file:

.image50L {
    float: left;
    width: 50%;
    padding: 0 0.5em 0.5em 0;
}

.image50L img {
    with: 100%;
    max-width: 9000px; /* This property is not well supported under epub2 */
}

Third Method:

a) In your .xhtml file:

    <div class="image50L>
         <img alt="Tropical Beach" src="../Images/Tropical%20Beach.jpg"/>

        <p>Lorem ipsum dolor sit amet, consectetur ... id est laborum.</p>
    </div>

b) In your .css file:

.image50L {
    width: 100%;
}

.image50L img {
    float: left;
    with: 50%;
    max-width: 9000px; /* This property is not well supported under epub2 */
  padding: 0 0.5em 0.5em 0;
}

With any of the three methods, you'll get what you want. If not, then there is something wrong with your ereader (maybe are you using CoolReader or FBReader or Readera?)

EDIT: I attach an epub with the three methods so you can test it

[HeartWare]

Originally Posted by RbnJrg

maybe are you using CoolReader or FBReader or Readera?

I'm using ReadEra - is that a known "problematic" reader?

If so, do you have one that you believe is standards conforming (and being maintained)?

Preferably one where I can assign "Groups" or "Collections" to my eBooks (I can't do that in ReadEra) and one where I can browse according to directory structure (I have structured my books in a hierarchical structure like this:

Genres
Science Fiction
Star Trek
The Original Series
The Next Generation
Star Wars
Dark Empire
Others
Fantasy
Harry Potter
DragonLance
Dragon Prince

etc. - you get the idea). Currently this arrangement substitutes for a collection/group capability, since ReadEra does allow browsing by directory.

[HeartWare]

Originally Posted by RbnJrg

First Method:

a) In your .xhtml file:

    <p><img class="fl" alt="Tropical Beach" src="../Images/Tropical%20Beach.jpg"/>Lorem ipsum dolor sit amet, consectetur ... id est laborum.</p>

b) In your .css file:

img.fl {
    float: left;
    with: 100%;
    max-width: 9000px; /* This property is not well supported under epub2 */
}

Where do I specify the occupied width of the image (the 25%/33%/40%/50% etc)?

Originally Posted by RbnJrg

Second Method:

a) In your .xhtml file:

    <div class="image50L>
         <img alt="Tropical Beach" src="../Images/Tropical%20Beach.jpg"/>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur ... id est laborum.</p>

b) In your .css file:

.image50L {
    float: left;
    width: 50%;
}

.image50L img {
    with: 100%;
    max-width: 9000px; /* This property is not well supported under epub2 */
}

This one gives me the "larger than viewport" image and the "text within image" in Sigil.

Originally Posted by RbnJrg

Third Method:

a) In your .xhtml file:

    <div class="image50L>
         <img alt="Tropical Beach" src="../Images/Tropical%20Beach.jpg"/>

        <p>Lorem ipsum dolor sit amet, consectetur ... id est laborum.</p>
    </div>

b) In your .css file:

.image50L {
    width: 100%;
}

.image50L img {
    float: left;
    with: 50%;
    max-width: 9000px; /* This property is not well supported under epub2 */
}

This one also gives me the "larger than viewport" image but the text now flows below the image.

[RbnJrg]

Originally Posted by HeartWare

I'm using ReadEra - is that a known "problematic" reader?

YES!!! That is the cause of your issue, your ereader

If so, do you have one that you believe is standards conforming (and being maintained)?

Use one of this:

PocketBook, Reasily, Lithium, Aldiko Next, Infinity Reader; anyone of them will display your epubs properly (they will honor all of your styles and properties). By the way, I attached in my previous post your test epub with some changes; open that epub in the ereaders I cited above and pick the best for your taste.

[HeartWare]

Originally Posted by RbnJrg

EDIT: I attach an epub with the three methods so you can test it

Your test file works in Sigil. I'm trying it out in ReadEras now...

[HeartWare]

Originally Posted by RbnJrg

YES!!! That is the cause of your issue, your ereader

All three of your samples display in ReadEra as a full-width (but constrained to page width) image with the text flowing beneath it.

I'll take a look at the readers you suggested and pick one that best suits my wishes. Thank you so much for your help - it's been invaluable.

[HeartWare]

Originally Posted by RbnJrg

PocketBook, Reasily, Lithium, Aldiko Next, Infinity Reader

Unfortunately, they all insist on "flattening" my book structure, not allowing me to browse by directory (kinda like a file browser).

Also, I can't find "Infinity Reader" in Google Play Store.

Why do readers insist on flattening the nice structure I have set up?

I'll probably stay on ReadEra as my primary eBook reader, but use one of the others to check my own created eBooks out, unless I can find one that is better than ReadEra and still allows me to browse by directory structure...

[HeartWare]

Originally Posted by HeartWare

Genres
  Science Fiction
    Star Trek
      The Original Series
      The Next Generation
    Star Wars
      Dark Empire
    Others
  Fantasy
    Harry Potter
    DragonLance
    Dragon Prince

Fixed outline.

[RbnJrg]

Originally Posted by HeartWare

Unfortunately, they all insist on "flattening" my book structure, not allowing me to browse by directory (kinda like a file browser).

Also, I can't find "Infinity Reader" in Google Play Store.

Why do readers insist on flattening the nice structure I have set up?

There is something wrong you are doing. I opened the epub I attached in my previous post and it displayed flawlessly on the ereaders I told you. And here you can find Infinity Reader:

https://play.google.com/store/apps/d...l=es_419&gl=US

[HeartWare]

Originally Posted by RbnJrg

I opened the epub I attached in my previous post and it displayed flawlessly on the ereaders I told you.

I'm sure they do (I never claimed otherwise) - but I discarded the readers as soon as I saw that they didn't allow me to browse by directory structure. That alone makes them unusable to me as my primary eBook reader.

I'll probably pick one of them as a "validator" for my own eBooks, but as far as general eBook reading, they fall short on that (to me) very important aspect.

Originally Posted by RbnJrg

And here you can find Infinity Reader:

"This app is not available for any of your devices"

That would explain why I can't find it when I search for it...