I have HTML code like this:

<section class="chapter>
  <p> ... </p>
  <p> ... </p>
  <p> ... </p>
  <figure class="plate">
    ...
  </figure>
  <p> ... </p>
  <p> ... </p>
  <p> ... </p>
</section>

And I want to achieve "book plate" effect like shown in the attachment.

What are my options via Prince CSS to make my <figure> be taken out of the page layout so that it gets printed on the consequent page as a full-size illustration?

1. plate.webp‎ 388.4 kB ‎
   Example of a book plate

Edited 21 Mar 2023 by noomorph

You can defer a page, here's how:

https://css4.pub/2022/float/#deferring-to-a-page

Edited 21 Mar 2023 by howcome

Thank you so much!!

I have another question — how do I make the next page after the illustration blank? Thanks in advance!

Also, I encounter a confusing behavior. Having a figure styled to "-prince-float: bottom page", it breaks the text flow (see bug.jpg attachment). My structure is:

section
- p
- ...
- p
- img
- p
- ...

The CSS for image is:
---
img.plate {
display: block;
page: plate;
string-set: figcaption attr(alt);

-prince-float: bottom page;
-prince-float-defer-page: right;
max-width: 100%;
max-height: 100%;
}
---

1. bug.jpg‎ 30.7 kB

Edited 9 Oct 2024 by noomorph