11-04-2023, 09:22 AM | #31 | |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
Quote:
Code:
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} 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>) |
|
11-04-2023, 09:24 AM | #32 |
A Hairy Wizard
Posts: 3,101
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
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"> |
Advert | |
|
11-04-2023, 09:30 AM | #33 | |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
Quote:
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. |
|
11-04-2023, 09:32 AM | #34 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
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). |
11-04-2023, 10:11 AM | #35 | |
Wizard
Posts: 1,549
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Last edited by RbnJrg; 11-04-2023 at 10:18 AM. |
|
Advert | |
|
11-04-2023, 10:46 AM | #36 |
Wizard
Posts: 1,549
Karma: 6613969
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>
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> 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> 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 Last edited by RbnJrg; 11-04-2023 at 11:03 AM. |
11-04-2023, 10:54 AM | #37 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
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. |
11-04-2023, 11:05 AM | #38 | |||
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
Quote:
Quote:
Quote:
|
|||
11-04-2023, 11:09 AM | #39 | |
Wizard
Posts: 1,549
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
YES!!! That is the cause of your issue, your ereader
Quote:
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. |
|
11-04-2023, 11:10 AM | #40 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
|
11-04-2023, 11:14 AM | #41 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
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. |
11-04-2023, 11:47 AM | #42 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
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... |
11-04-2023, 11:56 AM | #43 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
|
11-04-2023, 11:59 AM | #44 | |
Wizard
Posts: 1,549
Karma: 6613969
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
https://play.google.com/store/apps/d...l=es_419&gl=US |
|
11-04-2023, 12:10 PM | #45 | |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
Quote:
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. "This app is not available for any of your devices" That would explain why I can't find it when I search for it... |
|
Tags |
alignment, img, width |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Image Alignment Issues | AndrewCanada | Editor | 2 | 10-06-2019 11:47 AM |
Text - Image alignment problem | MrB | Sigil | 10 | 11-03-2012 03:36 AM |
Hello/Image and text alignment | Derek R | Introduce Yourself | 3 | 06-26-2011 10:47 AM |
Image alignment and spacing | Derek R | Kindle Formats | 5 | 06-25-2011 12:57 PM |