11-01-2023, 10:51 AM | #1 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
Image sizes and text alignment
In plain HTML I can do this:
<P> <IMG SRC="..." WIDTH="50vw" ALIGN="LEFT">text, text... </P> to have the image scaled to 50% of the page width and the text flowing along the right-hand side of the image for the height of the image, and then flowing along the full width of the page. In some readers, I can use WIDTH="50%" to achieve the same, but other readers interpret the 50% as "half the width of the image's full size" and not "half the width of the view (page)". Is there a consistent way in ePub to tell that I want the image to occupy 50% (or 40%/33% etc.) of the page width and the text to flow around it? |
11-01-2023, 11:11 AM | #2 |
A Hairy Wizard
Posts: 3,121
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
<div class="image"><img src="…" alt=""/></div>
.image {width=50%; float:left} img {width:100%; max-width: 1000px *or whatever the width of your image*} And welcome to MR!! |
Advert | |
|
11-01-2023, 12:21 PM | #3 | |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
Thank you...
Quote:
.image {width=50%; height=auto; float:left} and if not, then why not (just asking to learn). And is it the img {width:100%; max-width: 1000px *or whatever the width of your image*} part that makes the 50% be 50% of the page width and not the image width? Also, where do I put the "Text, text" part - inside or outside the <div>? And should the <div> be embedded in a <p> or does the <div> replace the <p> ? Last edited by HeartWare; 11-01-2023 at 12:23 PM. |
|
11-01-2023, 03:32 PM | #4 |
Resident Curmudgeon
Posts: 74,703
Karma: 130140792
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
You do not want 50vw. It doesn't work in a lot of cases. % is much better. Also, you don't want uppercase.
|
11-01-2023, 11:22 PM | #5 | |||
A Hairy Wizard
Posts: 3,121
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
Quote:
Quote:
For the ePub2 <div> example I would put the text right after the <img> inside the <div>, possibly surrounded by a <span>, but not necessarily. Then use the CSS to style it however you want. Code:
<div class="image"><img src="…" alt="…"/><span>Some Caption Text</span></div> .image {width:50%; float:left} .image img {width:100%; max-width:1000px} .image span{display:block; font-size:.6em; font-style:italic; margin-top:.5em; text-align:center; yadda-yadda} Last edited by Turtle91; 11-01-2023 at 11:39 PM. |
|||
Advert | |
|
11-01-2023, 11:28 PM | #6 | |
A Hairy Wizard
Posts: 3,121
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
However, vw and vh work very well on devices that support them. Check which market you are targeting (if any) to see if their devices support vw/vh. Percentages are safer, but they don’t provide some of the benefits gained with vw/vh. |
|
11-02-2023, 11:23 AM | #7 | |
Wizard
Posts: 1,567
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
As you can see, fragmentation is completely avoided and the text remains attached to the image (all this regardless of the change in font size). The image and the corresponding caption float "vertically" (they do not remain anchored to any paragraph, division or block) thereby ensuring that there are no blank spaces and that the caption remains attached to the image (the vertical displacement can be —at most— half a screen up or down). Last edited by RbnJrg; 11-02-2023 at 11:37 AM. |
|
11-02-2023, 11:30 AM | #8 |
A Hairy Wizard
Posts: 3,121
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
The example I was referencing was for ePub2. The failure case I was thinking about was on a small screen (like a phone) where the image height barely fits the display height. In that case the text would wrap to the next screen.
I don’t have experience with ePub3. Is there something special you did that would make a <div> NOT split in that case, or are you referencing <figure> functionality?? |
11-02-2023, 12:32 PM | #9 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
|
11-02-2023, 12:40 PM | #10 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
Thank you all, I'll check it all out over the weekend (one of the advantages of having my own markup language that then gets translated into .html (for web use) or .xhtml (for epub use) is that I can tweak each output for maximum compatbility with that target).
For instance, a left-aligned image at 50% width with floating text is defined as [IMG:<File Name> L 50%]Text, yaddah, yaddah. Last edited by HeartWare; 11-02-2023 at 12:43 PM. |
11-02-2023, 12:59 PM | #11 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
Is it possible to have the "50" part of the "50%" be a parameter in the <div> tag, or should I simply define
.image50 {width:50%; float:left} .image33 {width:33%; float:left} and then just use the appropriate class in the <div> tag? |
11-02-2023, 01:35 PM | #12 | |
Resident Curmudgeon
Posts: 74,703
Karma: 130140792
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
11-02-2023, 01:36 PM | #13 |
A Hairy Wizard
Posts: 3,121
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
You may be able to use JS to make it a parameter, but you are making it MUCH more complex… much greater opportunity for reader/device conflicts. I would stick with the image50 / image33 concept.
|
11-02-2023, 01:37 PM | #14 |
Resident Curmudgeon
Posts: 74,703
Karma: 130140792
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
11-02-2023, 01:41 PM | #15 | ||
Wizard
Posts: 1,567
Karma: 7043711
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Yes, I realized that; For that reason I didn't say that you were wrong but that what you stated was only valid for epub2.
Quote:
Quote:
EDIT: Of course, also the use of <figcaption> inside the <figure> block Last edited by RbnJrg; 11-02-2023 at 01:46 PM. |
||
Tags |
alignment, img, width |
Thread Tools | Search this Thread |
|
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 |