View Single Post
Old 11-04-2023, 10:46 AM   #36
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,835
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
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:

Code:
    <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:

Code:
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:

Code:
    <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:

Code:
.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:

Code:
    <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:

Code:
.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
Attached Files
File Type: epub Test.epub (1.75 MB, 100 views)

Last edited by RbnJrg; 11-04-2023 at 11:03 AM.
RbnJrg is offline   Reply With Quote