Page numbers

Basic usage using a page counter and a counter for the total number of pages

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  OK
Weasyprint  OK
PagedJS  OK
Typeset.sh  OK
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>

        <p id="c-1">
        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 id="c-2">
        Enim aenean? A, turpis lundium, egestas porttitor pulvinar velit sociis
aenean! Placerat est ac est, rhoncus dictumst etiam scelerisque? Proin. Hac
scelerisque scelerisque scelerisque? Placerat phasellus. Ultricies!
Pellentesque phasellus, mid cursus sagittis. Et, nascetur elementum, facilisis
mattis! Porta etiam mus! Phasellus adipiscing montes nascetur platea in non.
Cras aliquet vut, ultricies quis purus massa vel, mid, purus tortor ultrices,
cum nunc montes aliquam velit elementum auctor augue lacus in, nunc sed. Cras?
Nec urna cursus, egestas adipiscing. Etiam pulvinar odio sed velit hac pid
ridiculus dapibus ut placerat! Magna sit ridiculus tempor arcu duis tristique
amet in? Enim etiam ultrices mauris augue eros magnis tortor odio augue pid
magnis habitasse ultrices magna proin urna parturient lacus lectus. Aliquet
proin.
        </p>

        <p id="c-3">
        Ac non eros turpis ultrices elementum placerat augue risus in augue
elementum! Cras facilisis cras, cras porttitor diam arcu, dictumst enim! Augue!
Massa, tempor augue proin etiam eros odio. Magna. Diam, velit? Tortor elementum
lectus ut sed odio tincidunt, odio est, turpis sociis magnis magna arcu augue?
Tincidunt, risus lundium lorem, vut et cras ridiculus, tempor, dis sed ac? Ac
magnis tempor pellentesque, mattis dictumst? Sit arcu montes purus tincidunt
natoque? Eu scelerisque, ut augue elementum, dapibus nascetur a, amet lundium!
Et, enim? Elementum, facilisis etiam ac augue etiam tincidunt a a ac magna vel?
Nisi dapibus enim mattis et scelerisque sed elementum ac. Urna rhoncus? Augue!
Pulvinar eros, diam. Mauris tortor amet augue nunc, quis, lacus vel ultricies.
        </p>

        <p id="c-4">
        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 {
    counter-increment: page;
}

@page:left {
    @bottom-left {
         content: counter(page) " of " counter(pages);
         font-family: Arial, Sans Serif;
    }
}

@page:right {
    @bottom-right {
         content: counter(page) " of " counter(pages);
         font-family: Arial, Sans Serif;
    }
}

p {
    break-after: page;
}