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.

Note: PrinceXML has different view on how to treat a page-break-before on the first page (which is an error in my opinion).

Further reading:

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  OK
Weasyprint  OK
PagedJS  OK
Typeset.sh  UNSUPPORTED
no support for running elements
Vivliostyle  OK
BFO  OK
OK OK with issues Error Unsupported

HTML input

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

        <h1>This is the book <span style="font-size: 80px">test</span>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>

Stylesheet

@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;
    break-before: page;
}

@page{

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

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