search

cognitom / paper-css

Paper CSS for happy printing
https://www.npmjs.com/package/paper-css
MIT License
2.51k stars 342 forks source link

Can we generate the page number dynamically? #39

Open iamtekson opened 4 years ago

iamtekson commented 4 years ago

I am looking to generate page number dynamically while printing the document. Is there any possible way to do that?

0xflotus commented 4 years ago

I am looking to generate page number dynamically while printing the document. Is there any possible way to do that?

Yes this should be possible. It depends on you. How do you use the sections? E.g. you can initialize a Javascript variable which is incrementing with each new section or you generate the html from an external programming language and use there a loop to increment a counter which is displayed in the html.

jarodium commented 3 years ago

I use the following approach:


body {
    counter-reset: article;
}

article::after {
    counter-increment: article;
    content: attr(data-pageLabel) counter(article) " ";
    text-align:right;
    display: inline-block;
    position: absolute;
    bottom: 15mm;
    right: 15mm;
    font-size: 8pt;
}

`
data-pageLabel is an attribute I use in the article tag in order to have a translatable string in HTML rather than having it inside the CSS.