11-02-2023, 01:48 PM | #16 |
Resident Curmudgeon
Posts: 76,049
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
You cannot assume webkit is available. It isn't available for ADE. So any webkit code has to go.
Is there a way ib ePub3 to make it so if an image with the caption has to be pushed to the next screen that the text can move to fill in the previous page? |
11-02-2023, 02:00 PM | #17 |
Wizard
Posts: 1,605
Karma: 8291219
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Not exactly. When you use "vh" (or "vw") are you referring to the screen size, and with "%" you are referring to the container size. With "vh" you can do things impossible to get with "%". For example, how you could set the height of a <div> block at 40% of the screen? With "%", you couldn't. But, I must agree with you, that some EPUB2 ereaders, don't support the property. Under epub3, vw and vh work flawlessly.
|
Advert | |
|
11-02-2023, 02:07 PM | #18 | |
Resident Curmudgeon
Posts: 76,049
Karma: 134368292
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, 02:18 PM | #19 | ||
Wizard
Posts: 1,605
Karma: 8291219
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Why I did that? Because I use "-webkit-column-break-inside: avoid !important;" for ereaders based on webkit, and I use "break-inside: avoid !important;" and "display: inline-block !important" for ereaders not based on webkit. Quote:
Code:
<figure> <img src="../Images/Your_image.jpg" alt="" style="width:100%"/> <figcaption>Fig.1 - Blah, blah, blah</figcaption> </figure> Code:
figure { float: left; margin: 1em 0; padding: 4px; -webkit-column-break-inside: avoid !important; /* for webkit ereaders */ break-inside: avoid !important; /* for the rest of ereaders */ } figcaption { font-style: italic; /* if you wish */ padding: 2px; /* set here the measure you wish */ text-align: center; } |
||
11-02-2023, 02:37 PM | #20 | |
Wizard
Posts: 1,605
Karma: 8291219
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Here you can watch an epub with a div (an empty div) with a HEIGHT of 40% of screen (no matter the screen size of the ereader) based on vh. Make the same, but with "%" and post the epub here. I'm looking forward to seeing the code you wrote; I want to learn how you can achieve the impossible. EDIT: There is a hack that allows to use % but with that hack, many ereaders won't display correctly the epub. I want an epub that display a div with a height of 40% of the screen height and that can be displayed without issues by ereaders based on ADE. Last edited by RbnJrg; 11-02-2023 at 02:55 PM. |
|
Advert | |
|
11-04-2023, 03:15 AM | #21 | |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
Quote:
The relevant code from the xhtml is: <html> <head> <link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/> </head> <body> <div class="image50L"><img alt="Tropical Beach" src="../Images/Tropical%20Beach.jpg"/>Lorem ipsum ... id est laborum.</div> </body> </hrml> and the stylesheet: .image50L {width=50%; float:left} img {width:100%; max-width: 9000px} I have enclosed my test ePub... Last edited by HeartWare; 11-04-2023 at 03:18 AM. |
|
11-04-2023, 06:45 AM | #22 | |
Wizard
Posts: 1,605
Karma: 8291219
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Code:
<div class="image50L"> <img alt="Tropical Beach" src="../Images/Tropical%20Beach.jpg"/> <p>Lorem ipsum ... id est laborum....</p> </div> ............. .image50L { width=100%; } .image50L img { float: left; width:50%; max-width: 9000px } Last edited by RbnJrg; 11-04-2023 at 07:07 AM. |
|
11-04-2023, 07:43 AM | #23 | |
A Hairy Wizard
Posts: 3,212
Karma: 19000001
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
Unfortunately I can’t open the ePub on my phone - but from your relevant text example it should work. There must be something else wrong. I will try and look at it when I get home Monday, unless someone else solves it first. Edit: On a completely different note: if you are using images that are 9000 pixels wide I would suggest that is WAY too large for an ePub. The file size alone would make the ePub unwieldy not to mention longer rendering times. The maximum dimension size I use is 2200px (height) for the cover image. Other images usually max out around 1000-1500 for detailed images, or 600-750 for little ones. I don’t think this is the problem, just a typo when putting the example text. You have </hrml> at the end. Also, check that the stylesheet is linked properly. I see the link info in the head (missing the required <title>) but it may not be the correct info. In Sigil right-click on your xhtml file in the book browser window on the left and select “link stylesheet” then check the box on the stylesheet. You can also try adding a colored border during troubleshooting to make sure it is actually applying the css. div.image50l {width:50%; float:left; border: 1px solid red} Last edited by Turtle91; 11-04-2023 at 08:10 AM. |
|
11-04-2023, 08:29 AM | #24 | ||
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
Quote:
Quote:
That's a splendid advice. I'll try that out. |
||
11-04-2023, 08:38 AM | #25 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
I did the above (without the "div." prefix) and it drew a red border around the area of both the image and the text.
|
11-04-2023, 08:44 AM | #26 |
A Hairy Wizard
Posts: 3,212
Karma: 19000001
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
RbnJrg’s post made me question whether I understood your question correctly. I’ve been thinking you want an image to take up half the screen with a caption at the bottom. The following paragraph text flows around the image/caption. If that is true, then what we’ve been talking about works:
Code:
div.image50L {width:50%; float:left} div.image50L img {width:100%; max-width:1000px} div.image50L span {display:block; font-size:.6em…. Etc. } <p>Some paragraph before the image.</p> <div class="image50L"><img alt="…" src="…"/><span>Some Caption</span></div> <p>Some paragraph the will flow around and to the right of the image.</p> Please clarify your question. |
11-04-2023, 08:44 AM | #27 | |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
Quote:
Just to make sure that this wasn't an issue (I didn't expect it to be), I replaced the image with the .ePub version and the problem persists. |
|
11-04-2023, 08:57 AM | #28 | |||
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, 09:08 AM | #29 |
A Hairy Wizard
Posts: 3,212
Karma: 19000001
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
If the Lorem ipsum text is just normal paragraph text then it should easily work with:
Code:
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> |
11-04-2023, 09:08 AM | #30 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Nov 2023
Location: Copenhagen, DK
Device: ReadEra Android, Samsung Galaxy Tab S7+, Android 13
|
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. |
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 |