I'm trying to have a fullpage illustration + caption, where the caption can be long, and the illustration should be resized to the maximum possible size that still fits in a page/screen together with the caption. In a browser (Firefox) I could get it to work with either "display:grid" or "display:flex", but with Prince (12.5), the latter is not working as expected. Instead of a page with image + caption, I get a full-page image and then a blank page (not even with the caption). It's as if the .image box is not shrinking to make room for the caption.
Here is a sample code:
It works fine if I increase the page height (to e.g. 24cm), but that's of course not a solution, and on the browser it works no matter how I resize the window (as long as the caption fits, at least).
Is there some other solution or workaround? This code is used in other renderers, so I'd prefer a CSS-only solution.
Here is a sample code:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ops="http://www.idpf.org/2007/ops" xml:lang="en">
<head>
<title></title>
<style>
@page {
size: 9cm 12cm;
margin: 1mm;
}
.illustration {
page-break-inside: avoid;
page-break-before: always;
page-break-after: always;
text-align: center;
text-indent: 0;
margin: 0;
}
img {
max-width: 100%;
max-height: 100%;
}
.illustration .caption {
font-style: italic;
}
.fullpage {
height: 100vh;
width: 100%;
text-align: center;
}
@supports (display: grid) {
.illustration {
display: grid;
grid-template: "image" minmax(0,max-content) "caption" min-content;
grid-row-gap: 0.5em;
height: 100vh;
width: 100%;
margin: 0em auto;
box-sizing: border-box;
}
.illustration .image {
display: block;
grid-area: image;
}
.illustration .caption {
display: block;
grid-area: caption;
}
}
@supports (display: flex) {
.illustration {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
width: 100%;
box-sizing: border-box;
}
.illustration .image {
min-height: 1em;
flex-shrink: 1;
flex-grow: 0;
}
.illustration .caption {
flex-shrink: 0;
flex-grow: 1;
}
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="illustration">
<span class="image"><img src="https://blog.photoshopcreative.co.uk/wp-content/uploads/2017/10/xfinal-1-760x1024.jpg.pagespeed.ic.xtQ1opfcsy.jpg" alt=""/></span>
<span class="caption">Donec eu ex non dolor ornare tristique. Phasellus orci leo, auctor nec interdum quis, bibendum eu lacus. Integer erat nibh, gravida id varius id, pharetra sed nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum nulla mi, faucibus et tortor viverra, euismod fringilla mi.</span>
</div>
<div class="illustration">
<span class="image"><img src="https://blog.photoshopcreative.co.uk/wp-content/uploads/2017/10/xfinal-1-760x1024.jpg.pagespeed.ic.xtQ1opfcsy.jpg" alt=""/></span>
<span class="caption">Duis lorem nibh, convallis at ante quis, facilisis mollis lectus. Sed dignissim mauris ac mi dictum sodales. Nulla tincidunt orci iaculis mi mollis congue. Suspendisse et imperdiet mi. Vivamus mi justo, accumsan hendrerit egestas id, posuere vel turpis. Cras ac ipsum nunc. Proin pellentesque ex ac scelerisque egestas. Morbi ac elit at lectus vestibulum ultrices eget id dui. Proin facilisis tortor vel vehicula rutrum. Nunc euismod, nulla in elementum elementum, arcu nunc placerat quam, fermentum accumsan mauris est eu erat.</span>
</div>
<div class="fullpage">
<img src="https://blog.photoshopcreative.co.uk/wp-content/uploads/2017/10/xfinal-1-760x1024.jpg.pagespeed.ic.xtQ1opfcsy.jpg" alt=""/>
</div>
</body>
</html>It works fine if I increase the page height (to e.g. 24cm), but that's of course not a solution, and on the browser it works no matter how I resize the window (as long as the caption fits, at least).
Is there some other solution or workaround? This code is used in other renderers, so I'd prefer a CSS-only solution.