Lesson: lesson-blank-pages

This test is intended to simulate a novel with three chapters. Every chapter should start on a right page with header and footer. The blank (left) pages should remain completely empty (only possible with PrinceXML and Antennahouse by using the @page:blank selector).

PDF files

Converter PDF Preview
PDFreactor
OK
Download
PrinceXML
(OK)
Download
generates extra right blank page
Antennahouse
OK
Download
Vivliostyle
ERROR
Download
pagination not working properly

Stylesheet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
@import url("../styles/a5.css");

@page:blank {
    background: blue;

    @bottom-center {
        content: "";
    }

    @top-center {
        content: "";
    }
}

h1 {
    font-size: 30pt;
    color: red;
}

div.chapter {
    page-break-after: right;
}

HTML input

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

        <div class="chapter">
            <h1>Chapter 1</h1>
            <p>
                Pulvinar non pellentesque pellentesque nisi nascetur elementum platea
        turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus
        sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis
        penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est
        lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros
        placerat.
            </p>
        </div>

        <div class="chapter">
            <h1>Chapter 2</h1>
            <p>
                Pulvinar non pellentesque pellentesque nisi nascetur elementum platea
        turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus
        sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis
        penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est
        lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros
        placerat.
            </p>
        </div>
        <div class="chapter">
            <h1>Chapter 3</h1>
            <p>
                Pulvinar non pellentesque pellentesque nisi nascetur elementum platea
        turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus
        sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis
        penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est
        lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros
        placerat.
            </p>
        </div>
    </body>
</html>