(By which I mean actual title pages, as opposed to cover pages.)
I am curious to know what folks tend to prefer here when you have a choice, text-based or image-based? Either way, assuming you prefer to keep things on a single page, how do you enforce that?
Asking because I have a text-based title page design that, thanks to the image in one case being just over a certain size threshold, seem to want to spill over into a second page even when I set constraints via CSS. The location where it breaks varies, and my CSS (example below) is often circumnavigated, somehow.
Example HTML/CSS:
Code:
HTML
<body class="title-page">
<h2>Example title page</h2>
<p>Lorem ipsum.</p>
<figure>
<img src="../images/example-title-page.png" alt="Example title page" aria-describedby="fig-example"/>
<figcaption id="fig-example">Example image</figcaption>
<p>Lorem ipsum.</p>
</body>
CSS
.title-page, .title-page h2, .title-page p, .title-page figure, .title-page figcaption {
break-before: avoid;
break-after: avoid;
break-inside: avoid;
page-break-before: avoid;
page-break-after: avoid;
page-break-inside: avoid;
}
I realize that no matter what an editor does devices are always going to do what devices are wont to do, but I would like to take whatever sensible steps I can to limit my title pages to a single page. For now, though, I have fallen back on using a pure image-based title page as a temporary compromise while I work on a longer term solution.
Aside from just having a vague preference for using text in an ePub whenever possible, I also have more specific concerns about dark and light reading modes. The PNGs I'm currently working with for this temporary solution have the text set against a transparent background and I am wondering what might happen if I switch to JPG. Of course I'll be testing that myself at some point soon, but figured I would include it here anyway since it's relevant.
Suggestions & input are very welcome!