Log in / Register

Forum › How do I...?

Verso page with custom content?

slapec
Hello!

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%.

Example:
<html>
<head>
    <style>
        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);
            }
        }
    </style>
</head>
<body>
    <div id="verso">
        <h1>some important notes</h1>
    </div>
    <div id="content">
        <h1>1</h1>
        <h1>2</h1>
        <h1>3</h1>
        <h1>4</h1>
        <h1>5</h1>
        <h1>6</h1>
        <h1>7</h1>
        <h1>8</h1>
        <h1>9</h1>
        <h1>10</h1>
    </div>
</body>
</html>


Any ideas to sole this problem? Thank you!
mikeday
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.
slapec
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?
mikeday
Currently we don't have a mechanism to delay page floats an arbitrary number of pages, so that would be a bit tricky.
slapec
Alright, thank you!