After stumbling upon a helpful solution here, I wanted to print small cage cards in a neat format with some tweaks of my own.
Currently, this is how it appears for me (Fiddle):
/* CSS styles */ (styles modified here)
* {
-moz-box-sizing: border-box;
... (remaining CSS code truncated)
<div class="book">
<div class="page">
... (SVG image and content details truncated) ...
</svg>
</div>
<p class="bold c-align">3090</p>
... (content information truncated on card example) ...
</div>
</div>
... (additional page/card structure truncated) ...
</div>I'm satisfied with the initial result but encountered an issue where content overflowing onto multiple pages does not print correctly. Despite applying overflow: hidden; to the .subpage element, it doesn't resolve the problem of displaying the overflow content correctly when printing. Any suggestions on how to address this issue?
One potential idea involves estimating when nearing full page content and then dividing into separate pages as needed. However, this manual approach is time-consuming and imprecise.