Lesson: lesson-named-pages

This example renders two pages in A5 using so called “named pages”. The first named page is “Portait”, the second one is “Landscape”. Named pages allow you to render a particular content element on a different page with deviant @settings (size, orientation, page boxes).

  • Page 1: text on A5 (portrait)
  • Page 2: text on A5 (landscape)
  • Page 3: text on A4 (landscape, blue background, custom header and footer, custom colors)

PDF files

Converter PDF Preview
PDFreactor
OK
Download
PrinceXML
OK
Download
Antennahouse
OK
Download
Vivliostyle
ERROR
Download
no support for named pages so far

Stylesheet

 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
43
@import url("../styles/a5.css");

h1 {
    font-size: 1.6em;
    color: orange;
}

@page Portrait {
    size: a5;
}

@page Landscape {
    size: a5 landscape;
}

@page Bizarre {
    size: a6 landscape;
    background: blue;
    color: pink;
    border: 3px dashed yellow;
    margin: 1.5cm;

    @top-center {
        content: "This is so bizarre";
        color: red;
    }
    @bottom-center {
        content: "This is so bizarre";
        color: red;
    }
}

#portait {
    page: Portrait;
}

#landscape {
    page: Landscape;
}

#bizarre {
    page: Bizarre;
}

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

        <div id="portait">
            <h1>A5 portrait mode</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 habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et
        integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna
        rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio
        egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst
        phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis
        pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus
        augue.
            </p>
            <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 habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et
        integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna
        rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio
        egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst
        phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis
        pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus
        augue.
             </p>
        </div>
            
        <div id="landscape">
            <h1>A5 landscape mode</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 habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et
        integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna
        rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio
        egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst
        phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis
        pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus
        augue.
            </p>
            <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 habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et
        integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna
        rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio
        egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst
        phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis
        pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus
        augue.
             </p>
        </div>

        <div id="bizarre">
            <h1>A6 landscape mode, blue background, custom header and footer</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. 
             </p>

        </div>
            
    </body>
</html>