Lesson: lesson-running-elements

This example shows how to inject content pieces from the markup into a slot (e.g. header or footer). The @top-left slot is being filled with the title of the book. The @top-right slot is automatically filled with title of the subsection. Running elements allow you to move content piece into one of the sixteen page area. The running element itself is removed from the page flow.

PDF files

Converter PDF Preview
PDFreactor
OK
Download
PrinceXML
OK
Download
Antennahouse
OK
Download
Vivliostyle
ERROR
Download
No support for running elements

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

@page  {
    margin-top: 4cm;
}

h1 {
    position: running(header1);
    font-size: 1.2em;
    font-weight: bold;
}

h2 {
    position: running(header2);
    font-size: 1em;
    color: blue;
}

div.title {
    font-size: 2em;
    margin-bottom: 2em;
    page-break-before: always;
}

@page{

    @top-left {
        content: element(header1);
    }

    @top-right {
        content: element(header2);
    }
}

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
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

        <h1>This is the book title</h1>

        <div class="title">This is subsection 1</div>
        <h2>This is subsection 1</h2>

        <p>
        Dictumst lectus ut, integer tortor, nec et in! Dignissim et lacus
scelerisque, dictumst amet tincidunt? Arcu nisi ac ut urna lacus montes enim,
mid habitasse lundium ut. Porta lorem integer dis magna nec pulvinar lundium?
Dapibus purus odio vut! Cum, aliquam? Risus, sed, dis dolor nisi, rhoncus,
ultricies ultricies ac tincidunt adipiscing tempor! Tortor penatibus augue
urna. Mid vel. Dolor porta, magnis natoque porttitor. Augue vut elit velit,
risus urna non. Lectus non dis, rhoncus augue est sagittis ac augue elementum
porta natoque. Augue cum ultricies placerat duis et, odio magna penatibus urna
odio? Habitasse, aliquam purus. Magna quis nunc penatibus! Tincidunt dis nunc
hac, velit et, egestas tristique! Augue parturient, nisi, urna rhoncus
facilisis, aliquet augue nisi ac.
        </p>
        <p>
        Dictumst lectus ut, integer tortor, nec et in! Dignissim et lacus
scelerisque, dictumst amet tincidunt? Arcu nisi ac ut urna lacus montes enim,
mid habitasse lundium ut. Porta lorem integer dis magna nec pulvinar lundium?
Dapibus purus odio vut! Cum, aliquam? Risus, sed, dis dolor nisi, rhoncus,
ultricies ultricies ac tincidunt adipiscing tempor! Tortor penatibus augue
urna. Mid vel. Dolor porta, magnis natoque porttitor. Augue vut elit velit,
risus urna non. Lectus non dis, rhoncus augue est sagittis ac augue elementum
porta natoque. Augue cum ultricies placerat duis et, odio magna penatibus urna
odio? Habitasse, aliquam purus. Magna quis nunc penatibus! Tincidunt dis nunc
hac, velit et, egestas tristique! Augue parturient, nisi, urna rhoncus
facilisis, aliquet augue nisi ac.
        </p>
        <p>
        Dictumst lectus ut, integer tortor, nec et in! Dignissim et lacus
scelerisque, dictumst amet tincidunt? Arcu nisi ac ut urna lacus montes enim,
mid habitasse lundium ut. Porta lorem integer dis magna nec pulvinar lundium?
Dapibus purus odio vut! Cum, aliquam? Risus, sed, dis dolor nisi, rhoncus,
ultricies ultricies ac tincidunt adipiscing tempor! Tortor penatibus augue
urna. Mid vel. Dolor porta, magnis natoque porttitor. Augue vut elit velit,
risus urna non. Lectus non dis, rhoncus augue est sagittis ac augue elementum
porta natoque. Augue cum ultricies placerat duis et, odio magna penatibus urna
odio? Habitasse, aliquam purus. Magna quis nunc penatibus! Tincidunt dis nunc
hac, velit et, egestas tristique! Augue parturient, nisi, urna rhoncus
facilisis, aliquet augue nisi ac.
        </p>
        <p>
        Dictumst lectus ut, integer tortor, nec et in! Dignissim et lacus
scelerisque, dictumst amet tincidunt? Arcu nisi ac ut urna lacus montes enim,
mid habitasse lundium ut. Porta lorem integer dis magna nec pulvinar lundium?
Dapibus purus odio vut! Cum, aliquam? Risus, sed, dis dolor nisi, rhoncus,
ultricies ultricies ac tincidunt adipiscing tempor! Tortor penatibus augue
urna. Mid vel. Dolor porta, magnis natoque porttitor. Augue vut elit velit,
risus urna non. Lectus non dis, rhoncus augue est sagittis ac augue elementum
porta natoque. Augue cum ultricies placerat duis et, odio magna penatibus urna
odio? Habitasse, aliquam purus. Magna quis nunc penatibus! Tincidunt dis nunc
hac, velit et, egestas tristique! Augue parturient, nisi, urna rhoncus
facilisis, aliquet augue nisi ac.
        </p>
        <p>
        Dictumst lectus ut, integer tortor, nec et in! Dignissim et lacus
scelerisque, dictumst amet tincidunt? Arcu nisi ac ut urna lacus montes enim,
mid habitasse lundium ut. Porta lorem integer dis magna nec pulvinar lundium?
Dapibus purus odio vut! Cum, aliquam? Risus, sed, dis dolor nisi, rhoncus,
ultricies ultricies ac tincidunt adipiscing tempor! Tortor penatibus augue
urna. Mid vel. Dolor porta, magnis natoque porttitor. Augue vut elit velit,
risus urna non. Lectus non dis, rhoncus augue est sagittis ac augue elementum
porta natoque. Augue cum ultricies placerat duis et, odio magna penatibus urna
odio? Habitasse, aliquam purus. Magna quis nunc penatibus! Tincidunt dis nunc
hac, velit et, egestas tristique! Augue parturient, nisi, urna rhoncus
facilisis, aliquet augue nisi ac.
        </p>

        <div class="title">This is subsection 2</div>
        <h2>This is subsection 2</h2>
        <p>
        Dictumst lectus ut, integer tortor, nec et in! Dignissim et lacus
scelerisque, dictumst amet tincidunt? Arcu nisi ac ut urna lacus montes enim,
mid habitasse lundium ut. Porta lorem integer dis magna nec pulvinar lundium?
Dapibus purus odio vut! Cum, aliquam? Risus, sed, dis dolor nisi, rhoncus,
ultricies ultricies ac tincidunt adipiscing tempor! Tortor penatibus augue
urna. Mid vel. Dolor porta, magnis natoque porttitor. Augue vut elit velit,
risus urna non. Lectus non dis, rhoncus augue est sagittis ac augue elementum
porta natoque. Augue cum ultricies placerat duis et, odio magna penatibus urna
odio? Habitasse, aliquam purus. Magna quis nunc penatibus! Tincidunt dis nunc
hac, velit et, egestas tristique! Augue parturient, nisi, urna rhoncus
facilisis, aliquet augue nisi ac.
        </p>
        <p>
        Dictumst lectus ut, integer tortor, nec et in! Dignissim et lacus
scelerisque, dictumst amet tincidunt? Arcu nisi ac ut urna lacus montes enim,
mid habitasse lundium ut. Porta lorem integer dis magna nec pulvinar lundium?
Dapibus purus odio vut! Cum, aliquam? Risus, sed, dis dolor nisi, rhoncus,
ultricies ultricies ac tincidunt adipiscing tempor! Tortor penatibus augue
urna. Mid vel. Dolor porta, magnis natoque porttitor. Augue vut elit velit,
risus urna non. Lectus non dis, rhoncus augue est sagittis ac augue elementum
porta natoque. Augue cum ultricies placerat duis et, odio magna penatibus urna
odio? Habitasse, aliquam purus. Magna quis nunc penatibus! Tincidunt dis nunc
hac, velit et, egestas tristique! Augue parturient, nisi, urna rhoncus
facilisis, aliquet augue nisi ac.
        </p>

    </body>
</html>