[RbnJrg]

Originally Posted by PilcrowandStanza

As mentioned, the hard part now seems to be adding the caption properly and I'm not finding a good answer. Would prefer to have the caption be text instead of rasterized with the image.

First at all, any caption must be added by using the tag <figcaption> inside the <figure> structure. Of this way:

<figure>
	<svg ...>
	</svg>
	<figcaption>Your Caption Here</figcaption>
<figure>

But the adding of a caption, changes the things a bit. So far, we had reserved a space of 98vh for the image (the svg wrapper) and it took the 100% of that space. But now, with a caption, we have to split that space of 98vh in two parts: one for the image and one for the caption. The structure would be something like:

 	 ---<figure>
	|	------------
	|
	|
	|	Space for image (svg wrapper)
   98vh	|
	|
	|	------------
	|	Space for caption <figcaption> tag
	|	------------
 	 ---</figure>

And now the question is: how much space to reserve for the image and how much space to reserve for the caption? Since we have already defined the height of the container (98vh), NOW AND ONLY NOW, IS POSSIBLE TO USE % TO RESERVE THOSE SPACES (and is also possible to determine the values with high precision, BUT since the caption is text and the user can change the size of the text, that initial precision is not very usefull).

The first thing to consider is the caption text, how long is, how long can be? One line? Two lines? And also we must consider the font-size of the caption. Let's suppose that the caption font-size will be 1em, the caption line-height: 1.2em, a margin-top and bottom of 0.25em and only one line. If so, then the height of the caption will be 1.7em. But we will take 3.4em in case the user changes (increases) the font-size (if the caption were of two lines, then the height will be 3.4em but we'd take 6.8em).

Now we know the height of the caption, what will the space for the image be? The space for the image (for the svg wrapper) will be "height: calc(100% - 3.4em)" (calc is a property of css3). In that formula, "100%" represents the height of the <figure> container, that is, 98vh (and 3.4em is the caption height). This should work even with an increase of 100% in font-size for body text (let's say that will work if the user increase the font-size from 1em to 2em). If the user makes an increment higher than 100%, then the caption could not remain joined with the image (according to the values we have used; if instead of 3.4em we had taken 6.8em. then the caption will remain joined to the image even if the user makes an increment of 200% in the font-size, from 1em to 3em).

Now the code:

1. In your xhtml file:

  <figure>
    <div class="pic">
      <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 600 900" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="600" height="900" xlink:href="../Images/Img1.jpg"/></svg>
    </div>

    <figcaption>This is my caption</figcaption>
  </figure>

Remember that the values of width (600) and height (900) (they are px) must be replaced with the width and height of your image in px (also in the viewBox property).

2. In your .css stylesheet:

figure {
  float: left;
  width: 100%;
  height: 98vh; /* This is key */
  margin: 0px; /* or what you want */
  text-align: center;
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important; 
}

figcaption {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.2em;
  margin: 0.25em 0;
}

.pic {
  height: calc(100% - 3.4em);
}

Now, watch this screenshoot:



As you can see, the caption is quite aparted from the image. Why? To see why, let's add a border to the image:

.pic {
  height: calc(100% - 3.4em);
  border: 1px solid red;
}

Now we can see that the issue is due to the proportion of the image regarding the proportion of the screen. There is nothing we can do to fix that. As much, we can center (horizontal and vertically) the image perfectly:



and we do that with:

.pic {
  height: calc(100% - 3.4em);
/* properties to center vertically an image inside a container no matter the size of the container or the image */ 
  display: flex;
  align-items: center;
  justify-content: center;
}

Well, that's all about how to add a caption to an image at full page UNDER EPUB3. Don't forget you also need to write code to handle epub2 ereaders.

Regards