Dear Prince XML,

I'm trying to format a book with figures. Most of the time, the figures and captions are formatted correctly on the same page, with the caption below the image. However, when the image is too tall, the caption either floats on top of the image or gets moved to the next page. My question is: How can I make sure that the entire figure stays on the same page with the caption below the image, even when the image is tall? There must be some way to treat the figure+caption as a unit that automatically resizes itself to fit on the page, but I don't know how to do this.

Here's the HTML for the figures:

<figure>
<img src="/images/jhfsadh.tif" alt="Caption text" /><figcaption aria-hidden="true">Caption text</figcaption>
</figure>

Here's my CSS code for the figures. I'm sure it can be simpler, but I'm new to CSS. Any suggestions for improvement/simplification would be appreciated!

figure {
  -prince-float: page;
  page-break-inside: avoid;
  display: table;
  margin-left: auto;
  margin-right: auto;
}

figure img {
  max-width: 95%;
  display: table-row;
  margin-left: auto;
  margin-right: auto;
  -prince-image-magic: convert-to-jpeg(95%);
}

figure figcaption {
  font-style: italic;
  text-align: center;
  padding-top: 0.1in;
  padding-bottom: 0.2in;
  display: table-caption;
  caption-side: bottom;
}

I'm attaching two screenshots. The first one renders the figure correctly with the caption below the image. The second one renders the figure incorrectly with the caption floating on top of the image. Thank you!

1. princeXMLExampleCorrect.jpg‎ 157.9 kB ‎
   Correct rendering of figure and caption
2. princeXMLExampleIncorrect.jpg‎ 104.2 kB ‎
   Incorrect rendering of figure + caption

Yes, if an element that is too big can't be fragmented and moving it to the next page won't help, then it will overflow and later content (such as the caption in this case) will end up on top of it.



You can size the figure+caption as a unit using flex layout, for example. I'm not sure if in CSS there is a way to prevent it moving to the next page if the image is too large, but the Box Tracking API can be used for custom sizing.

Thank you, @markbrown, for pointing me towards the flex layout! The following CSS does what I want!

figure {
  -prince-float: page;
  display: flex;
  flex-flow: column wrap;
  padding-bottom: 0.2in;
}

figure img {
  max-width: 100vw;
  max-height: 95vh;
  align-self: center;
  -prince-image-magic: convert-to-jpeg(95%);
}

figure figcaption {
  font-style: italic;
  text-align: center;
  padding-top: 0.1in;
}

Great! Though if all you want is to limit the height of the image (which doesn't require treating the figure+caption as a unit), then you just needed to add the "max-height: 95vh;" to your original code.