![]() |
#31 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,772
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
![]() |
|
![]() |
![]() |
![]() |
#32 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,772
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
If you also want to take into account the ereader in landscape position, use the following code:
1. In your .css file: Code:
p { text-indent: 1.2em; /*change this if you wish */ text-align: justify; /* change this if you wish */ font-size: 1em: /* change this if you wish */ font-family: "Arial", sans-serif; /* change this if you wish */ margin: 0; /* change this if you wish */ } h2 { font-size: 1.2em; /* change this if you wish */ text-align: justify; /* change this is you wish */ -webkit-column-break-before: always !important; /* this is for epub3 */ page-break-before: always !important; /* this is for epub2 */ break-before: always !important; /* this is also for epub3 */ } .container { margin: 0; /* change this if you wish */ } .picture { width: 100%; height: auto; max-height: 50vh; /* You can change this for a higher value if you wish */ } Code:
<h2>Your definition</h2> <div class="container"> <svg class="picture" xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMin meet" version="1.1" viewBox="0 0 xxx yyy" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="xxx" height="yyy" xlink:href="../Images/your_image.jpg"/></svg> </div> <p>Your text</p> The image need to have and adaptative height, for that reason I give the height to the svg element and not to the div (with a fix height, is better to set the height in the div). Try the code in portrait and landscape mode and you'll understand better how it works. Last edited by RbnJrg; 05-03-2025 at 09:29 AM. |
![]() |
![]() |
Advert | |
|
![]() |
#33 | |
Enthusiast
![]() Posts: 30
Karma: 10
Join Date: Apr 2025
Device: none
|
Quote:
Please confirm that this is what you are referring to. Thank you very much. CSS: img { display: inline-block; width: 99%; } .image-setup { text-indent: 0; text-align: center; margin: 0; } .page-break { page-break-before: always; break-before: page; text-indent: 0; margin: 1em 0; } HTML: <p>text text text</p> <h2 class="page-break">Nice Image</h2> <div class="image-setup"> <img src="image1.jpg" alt="beautiful image one"> </div> <p>text text text</p> |
|
![]() |
![]() |
![]() |
#34 |
Enthusiast
![]() Posts: 30
Karma: 10
Join Date: Apr 2025
Device: none
|
|
![]() |
![]() |
![]() |
#35 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,772
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
Code:
p { text-align: justify; } h2 { font-size: 1.2em; text-align: justify; -webkit-column-break-before: always !important; page-break-before: always !important; break-before: always !important; } .container { height: 50%; margin: 0; text-align: center; } .picture { width: 100%; } @supports(max-height: 50vh) { .picture { height: auto; max-height: 50vh !important; } } @supports(display: flex) { .container { height: auto !important; } .picture { width: auto !important; max-width: 100%; } } Don't use <img> and don't use the "img" and "image-setup" styles. So, the following code must be erased: CSS: Code:
img { display: inline-block; width: 99%; } .image-setup { text-indent: 0; text-align: center; margin: 0; } .page-break { page-break-before: always; break-before: page; text-indent: 0; margin: 1em 0; } Code:
<p>text text text</p> <h2 class="page-break">Nice Image</h2> <div class="image-setup"> <img src="image1.jpg" alt="beautiful image one"> </div> Code:
<h2>Your definition</h2> <div class="container"> <svg class="picture" xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMin meet" version="1.1" viewBox="0 0 xxx yyy" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="xxx" height="yyy" xlink:href="../Images/your_image.jpg"/></svg> </div> <p>Your text</p> Last edited by RbnJrg; 05-03-2025 at 01:41 PM. |
|
![]() |
![]() |
Advert | |
|
![]() |
#36 | |
Enthusiast
![]() Posts: 30
Karma: 10
Join Date: Apr 2025
Device: none
|
Quote:
I just want to say a big thank you for all the time, for all the hard work you’ve done on my epub. I know you’ve spent a lot of time and effort writing the codes, and I really, really appreciate it. It means a lot to me. Thanks a lot — I couldn’t have done this without you! I’ll definitely try these codes |
|
![]() |
![]() |
![]() |
#37 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 79,763
Karma: 145864619
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Is this eBook intended to be read by anyone using any device? If so, also test it on a cell phone to make sure it displays properly.
|
![]() |
![]() |
![]() |
#38 | |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,772
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
![]() |
|
![]() |
![]() |
![]() |
#39 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,772
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
|
![]() |
![]() |
![]() |
#40 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 79,763
Karma: 145864619
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
![]() |
![]() |
![]() |
#41 | |
Connoisseur
![]() Posts: 63
Karma: 10
Join Date: May 2025
Device: iPad
|
Quote:
There are some crazy things going on in the world... |
|
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Word -> EPUB Chapter titles blank for Headings using Word's {TC...} codes | GranitStateColin | Conversion | 2 | 12-21-2021 09:29 PM |
images in epub | alberto_savoini | Tolino | 1 | 01-10-2020 12:33 AM |
Images exporting to epub | carlsbad | Workshop | 5 | 09-13-2014 02:10 AM |
Epub creation - pasting word and preserving codes | Mr Pointy | ePub | 24 | 03-21-2014 02:55 PM |
ePub with Images | prdufresne | Calibre | 10 | 12-04-2010 01:55 AM |