epub, images, and my codes

[RbnJrg]

Originally Posted by robertmchicago

........................
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]

If you also want to take into account the ereader in landscape position, use the following code:

1. In your .css file:

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:

  <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.

[robertmchicago]

Originally Posted by RbnJrg

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]

Originally Posted by RbnJrg

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!

[RbnJrg]

Originally Posted by robertmchicago

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:

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:

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>

Instead, use the xhtml code I wrote in my previous post, that is:

  <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.

[robertmchicago]

Originally Posted by RbnJrg

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

[JSWolf]

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.

[RbnJrg]

Originally Posted by robertmchicago

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]

Originally Posted by JSWolf

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.

[JSWolf]

Originally Posted by RbnJrg

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.

[Slevin#7]

Originally Posted by RbnJrg

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...