Image sizes and text alignment

[RbnJrg]

Originally Posted by DNSB

The !important tag allows you to override other settings even if they have higher specificity. OTOH, only use !important when it is absolutely needed since overuse can make debugging a PITA. At one time, I was editing a stylesheet where virtually every line ended in !important; and it made figuring out what was going on no fun. I finally ended up removing the !importants and then adding 1 set back which kept a button from changing background colour.

Very right! In the case mentioned above I employed the !important tag, it was only for the following properties (because PocketBook has issues to handle them):

-webkit-column-break-inside: avoid !important; 
break-inside: avoid !important; 
page-break-inside: avoid !important;

Your answer make me see that my answer was ambiguous; I didn't employ the !important tag in all the properties.

[JSWolf]

Originally Posted by RbnJrg

Very right! In the case mentioned above I employed the !important tag, it was only for the following properties (because PocketBook has issues to handle them):

-webkit-column-break-inside: avoid !important; 
break-inside: avoid !important; 
page-break-inside: avoid !important;

Your answer make me see that my answer was ambiguous; I didn't employ the !important tag in all the properties.

If it doesn't fiit on the page, it's either going to drop to the next page or it's going to flow off of the page, This is why most page breaks are useless.

[Slevin#7]

Originally Posted by RbnJrg

-webkit-column-break-inside: avoid !important; 
break-inside: avoid !important; 
page-break-inside: avoid !important;

Also, can you tell me, why you use

-webkit-column-break-inside

instead of

-webkit-page-break-inside

which would more likely match the intention of the other properties?

[RbnJrg]

Originally Posted by Slevin#7

Also, can you tell me, why you use

-webkit-column-break-inside

instead of

-webkit-page-break-inside

which would more likely match the intention of the other properties?

First at all, because "-webkit-page-break-inside" doesn't exist and second, because ereaders based on Readium/Webkit to display the epub as unique pages, split (internally) in columns the full xhtml file that is showing.

[RbnJrg]

Originally Posted by JSWolf

If it doesn't fiit on the page, it's either going to drop to the next page or it's going to flow off of the page, This is why most page breaks are useless.

The images fit on the page but in some ereaders (for example Foliate for linux) without "-webkit-column-break-inside: avoid" images can be showed half in page and half in the following one, they are not forced to float vertically. All this on epub3 of course.

[JSWolf]

Originally Posted by RbnJrg

The images fit on the page but in some ereaders (for example Foliate for linux) without "-webkit-column-break-inside: avoid" images can be showed half in page and half in the following one, they are not forced to float vertically. All this on epub3 of course.

I've never heard of any program that splits an image. If the image is too larger for the page, it can get moved to the next page or you won't see some of the image as it's off the page for the bit that don't fit.

[RbnJrg]

Originally Posted by JSWolf

I've never heard of any program that splits an image. If the image is too larger for the page, it can get moved to the next page or you won't see some of the image as it's off the page for the bit that don't fit.

No, the image is not too larger for the page, is a half page image. But Foliate (a Linux program), when I use the code to force the image float vertically (so the fragmentation is avoided), it displays the image in the place where it was situated (that is, the image doesn't float) and many time the picture is showed half in page (at the bottom) and half in the next one (at top). For that reason I employ "-webkit-column-break: avoid !important".

EDIT: Here you have the issue with Foliate (in this case with a full page image) and the right way to be displayed with Readium:

a) The issue with Foliate:



b) Perfectly showed with Readium:



In both cases the fragmentation is avoided (no blank space) but in Foliate the image was splitted.


However I was able to fix that also in Foliate:

[Quoth]

Originally Posted by RbnJrg

The images fit on the page but

Really? How do you know what size the screen is, or does the image always scale?

[RbnJrg]

Originally Posted by Quoth

Really? How do you know what size the screen is, or does the image always scale?

Because I use a svg wrapper inside a div with a height of 99vh So, no matter how big is the picture, the wrapper makes its magic and the image always will fit inside the space asigned. I've done a lot of work (and testing) on ​​this point, and I can assure you that using an SVG wrapper makes the problems go away. But I don't always set the container div to 99vh in height; depending on the image (mainly half-page images), I set it to 50vh (or 60vh) in height. The thing even works in landscape mode; watch the following examples (with full and half page images):

https://www.mobileread.com/forums/sh...6&postcount=16

https://www.mobileread.com/forums/sh...0&postcount=17

Of course, all of this is done under epub3 together with appropriate code to avoid fragmentation.

[bmilan]

Hello! I've been lurking a lot here for a while now and decided it's time to ask for advice.
In the company I work at I sometimes prepare e-books for clients. I don't have much experience so I've always been doing epubs as simple as can be. But I always struggle with images.
Now I'm working on a book (ePub3) with lots of images with captions. Images are both vertical and horizontal, all of them have captions, both short and long. I included them in <figure> tags following guidlines found on this forum and while horizontal images display more or less properly, vertical ones just don't work. So I think I'll attempt RbnJrg's method with svg wrapper. I have three questions though:
1. Is there any chance this will work on Kindle after converting to mobi with kindle previewer? The client wants to get both ePub and mobi formats.
2. Is there a proper, working way to include alternative text for image in svg wrapper? The client wants e-book to be accessible.
3. Can I leave horizontal images in <figure> tags and put only problematic vertical ones in svg? Or should I do everything one way?
Any help would be greatly appeciated!

[Quoth]

For reflowable ebooks
Mobi is basically dead. You can only really know what Amazon is doing by uploading the epub and publishing, then buying it on 2 kinds of Kindle and an app. If all are on same account it's one purchase. The default is KFX with the more similar to epub older azw3/KF8 as a fallback on older Kindles.

The epub3 can work and be accessible, but epub2 is also accessible and works on more ereaders and apps. Many epub3 features are not supported by Amazon.

The Amazon "Kindle Previewer" isn't doing the same conversion as Amazon does on epub uploads. It's only a rough guide and its output can't be published on Amazon. I've abandoned it. The "Send to Kindle" email or web page and download via WiFi to Kindle and app might be more accurate than the Previewer, but isn't the same as the Publishing conversion Amazon does (I don't know why).

They deliver KFX for any ereader since PW1 and all apps and azw3/KF8 format for K3 to PW1. Since they abolished Download and Transfer mostly the K1, K2 and DX family can't get downloads. Only they and DXG are limited to mobi (KF7).

To fully test you need to publish, buy and unpublish after sync with four things:
Kindle App on Android
Kindle App on iOS
Any Kindle newer than a Paperwhite 1 (Gen5?) for KFX.
Any Kindle from K3 (gen3 keyboard ) or later up to Paperwhite 1, with the last FW (some of the older Kindles didn't have azw3/KF8 originally).

Note that are are several fixed layout Kindle formats (at least one is an encapuslated PDF). The app file ending doesn't indicate format. Older PC or Kindle downloads in onld mobi AKA KF7 can have .mobi or .azw (no 3) endings.

I put images each in their own <p> with nothing else, unless they are very small and several same height on one line (then they are in the same tag) or unless they are full screen.

[Quoth]

Maybe RbnJrg has a list of epub3 features that work on azw3/KF8 & KFX via actual Amazon publishing* from an epub3 upload.

[* Not the Previewer or slightly better STK, but a bought Kindle ebook on the 4 viable platforms of iOS, Android, newer Kindles and older Kindles with working WiFi]

[RbnJrg]

Originally Posted by bmilan

...
I have three questions though:

1. Is there any chance this will work on Kindle after converting to mobi with kindle previewer? The client wants to get both ePub and mobi formats.

Kindle is anothe world. If you want the epub to be converted in KFX/azw3 format, then you can't employ advanced epub3/css3 properties. Take what Quoth said you about Kindle; the handle of svg is very limited under the KFX format.

2. Is there a proper, working way to include alternative text for image in svg wrapper? The client wants e-book to be accessible.

You can include text inside a svg wrapper using the <text> and <tspan> tags (the usual and generally supported method, even in epub2), and more recently, using the <foreignObject> tag, which allows you to use xhtml and css inside a svg. However, if you want the widest possible compatibility, use <text> and <tspan>.

3. Can I leave horizontal images in <figure> tags and put only problematic vertical ones in svg? Or should I do everything one way?

You could put all images in <figure> tags (vertical and horizontal) without using svg wrappers, if you works ONLY FOR EPUB3. I employ svg because I have to write less code for compatibility with epub2. But under epub3, with flex-box you can do "miracles" even with the img tag. For example:

1. In your xhtml file:

  <figure class="container">
    <div class="imageRow">
      <img src="../Images/Img1.jpg" alt="Imagen de ejemplo"/>
    </div>

    <figcaption class="textRow">
      <p>This is an example of text. You can change the font size to see how the image adapts. The goal is for the image to fill all available vertical space, leaving only enough space for the text. Additionally, the main container takes up 100% of the viewport's height.<br/><br/>This additional text is to test how the growth of text content affects the image space. As this text grows larger (simulating a font increase), the image should reduce its height to accommodate it.</p>
    </figcaption>
  </figure>

And in your .css stylesheet:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  margin: 0;
}

.imageRow {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  background-color: #00ff00; /* you can delete this, is for debugging purpose */
  min-height: 0;
}

.imageRow img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.textRow {
  flex: 0 0 auto;
  padding: 20px;
  background-color: #e0e0e0; /* you can delete this, is for debugging purpose */
}

.textRow p {
  margin: 0;
  font-size: 1em;
  text-align: center;
  line-height: 1.2;
}

Below I attach an epub so you can understand better the code. And if you open that ebook in Calibre Viewer for example and change the font size, you should get the following outputs:



As you can see, the caption remains with the image no matter the font-size. When you increase the size of the text, then the size of the image decreases and that way everything stays together.

[DNSB]

Originally Posted by bmilan

Hello! I've been lurking a lot here for a while now and decided it's time to ask for advice.
In the company I work at I sometimes prepare e-books for clients. I don't have much experience so I've always been doing epubs as simple as can be. But I always struggle with images.
1. Is there any chance this will work on Kindle after converting to mobi with kindle previewer? The client wants to get both ePub and mobi formats.

For Kindle format support for CSS, you can check Amazon. Two pages to look at are:

Attributes and Tags Supported by Enhanced Typesetting

HTML and CSS Tags Supported in Kindle Format 8

From my experience, even CSS listed as supported often has issues when comparing the output to the same CSS on a ePub renderer.

[RbnJrg]

Originally Posted by DNSB

From my experience, even CSS listed as supported often has issues when comparing the output to the same CSS on a ePub renderer.

I agree. For example, KFX supports, in theory, <figure> and display: flex and float: left. Well, with the proper combination of the tag and properties, it is possible to avoid fragmentation (blank spaces originated by images, tables, etc.) under epub3. But under KFX one can't have the same output.