Register Guidelines E-Books Today's Posts Search

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 05-03-2025, 07:14 AM   #31
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,772
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by robertmchicago View Post
........................
Please note that there is a page break on same html file before every definition that contains an image.
Well, you are lucky Your layout is simple and since before a definition with an image you have a pagebreak, the code I wrote in my first post (that works for both, epub2 and epub3) should work fine if you are not worried about the ereader is in landscape mode. And don't worry about the <figure> tag, your epub doesn't need it.
RbnJrg is offline   Reply With Quote
Old 05-03-2025, 08:55 AM   #32
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,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 */
}
2. In your .xhtml file:
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>
To generate the <svg> code you have a good Sigil plugin that will do the work for you.

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.
RbnJrg is offline   Reply With Quote
Advert
Old 05-03-2025, 10:11 AM   #33
robertmchicago
Enthusiast
robertmchicago began at the beginning.
 
Posts: 30
Karma: 10
Join Date: Apr 2025
Device: none
Quote:
Originally Posted by RbnJrg View Post
Well, you are lucky Your layout is simple and since before a definition with an image you have a pagebreak, the code I wrote in my first post (that works for both, epub2 and epub3) should work fine if you are not worried about the ereader is in landscape mode. And don't worry about the <figure> tag, your epub doesn't need it.

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>
robertmchicago is offline   Reply With Quote
Old 05-03-2025, 10:16 AM   #34
robertmchicago
Enthusiast
robertmchicago began at the beginning.
 
Posts: 30
Karma: 10
Join Date: Apr 2025
Device: none
Quote:
Originally Posted by RbnJrg View Post
If you also want to take into account the ereader in landscape position, use the following code:
Thank you very much for taking the time to write these codes for me. We will definitely try them. Thanks again!
robertmchicago is offline   Reply With Quote
Old 05-03-2025, 10:41 AM   #35
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,772
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by robertmchicago View Post
Thank you very much for taking the time to write these codes for me. We will definitely try them. Thanks again!
No problem. But use the following code (forget everything I wrote before) in your .css stylesheet:

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%;
  }
}
It takes a lot to explain how it works but is for both, epub2 and epub3, for portrait and landscape mode; the fallback code for epub2 is already included.

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;
}
HTML:
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>
Instead, use the xhtml code I wrote in my previous post, that is:

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>
(of course, instead of "xxx" and "yyy" must be the width and height of your image but the plugin will do all the work for you, so writing all that code won't cost you anything) and the .css in this post. After that, do your tests in ADE 2.x (it should be buried) and in any epub3 ereader. In my tests, it worked flawlessly (in portrait and landscape mode) in ADE 2.x, 3.x, KOReader (all of them, epub2 ereaders), the three Sigil plugins, Calibre Viewer and Thorium.

Last edited by RbnJrg; 05-03-2025 at 01:41 PM.
RbnJrg is offline   Reply With Quote
Advert
Old 05-03-2025, 11:52 AM   #36
robertmchicago
Enthusiast
robertmchicago began at the beginning.
 
Posts: 30
Karma: 10
Join Date: Apr 2025
Device: none
Quote:
Originally Posted by RbnJrg View Post
No problem. But use the following code (forget everything I wrote before) in your .css stylesheet:
Thank You So Much!

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
robertmchicago is offline   Reply With Quote
Old 05-03-2025, 11:58 AM   #37
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
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.
JSWolf is offline   Reply With Quote
Old 05-03-2025, 12:08 PM   #38
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,772
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by robertmchicago View Post
Thank You So Much!

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
No problem!
RbnJrg is offline   Reply With Quote
Old 05-03-2025, 12:11 PM   #39
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,772
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by JSWolf View Post
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.
In my tests I reduce the ereaders windows to imitate a small device and the code worked as expected, that is, fine.
RbnJrg is offline   Reply With Quote
Old 05-03-2025, 02:56 PM   #40
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
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
Quote:
Originally Posted by RbnJrg View Post
In my tests I reduce the ereaders windows to imitate a small device and the code worked as expected, that is, fine.
That's a good idea.
JSWolf is offline   Reply With Quote
Old 06-13-2025, 05:11 AM   #41
Slevin#7
Connoisseur
Slevin#7 began at the beginning.
 
Posts: 63
Karma: 10
Join Date: May 2025
Device: iPad
Quote:
Originally Posted by RbnJrg View Post
Not always, depend on the ereader; with "display: inline-block" you'll be sure that images won't split.
Even that is not 100% guaranteed, as I've encountered displaying an image (PNG with transparency) splitted on Apple Books (for iPad iOS) in dark mode. Odd enough, the same image in a second version for light mode is displayed as a whole when the reader is set into light mode.

There are some crazy things going on in the world...
Slevin#7 is offline   Reply With Quote
Reply


Forum Jump

Similar Threads
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


All times are GMT -4. The time now is 04:34 PM.


MobileRead.com is a privately owned, operated and funded community.