Forum How do I...?

Verso page with custom content?


I have a 5 page long text. What I'm trying to achieve is that to show completely different content on the verso of the first page. The closest hack I've managed to come up with was a combination of the flow css rule + margin-top: 100% on the 2nd page, but for some reason (a bug maybe?) no content is outputted after the second page if the margin is 100%.

        h1 {
            line-height: 12;

        #verso {
            flow: static(verso);

        @page:nth(2) {
            margin-top: 100%;

            @top {
                content: flow(verso);
                background: rgba(255, 0, 0, 0.5);
    <div id="verso">
        <h1>some important notes</h1>
    <div id="content">

Any ideas to sole this problem? Thank you!
You could use a page float like this:
div#verso { float: top next }

Then make the div itself as big as necessary with no need for an @page rule.
It works, thank you!

I'm just curious: what css rule should I use if I want to place this content on the 3rd page?
Currently we don't have a mechanism to delay page floats an arbitrary number of pages, so that would be a bit tricky.
Alright, thank you!