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