{"id":1531,"date":"2010-08-20T12:41:22","date_gmt":"2010-08-20T07:11:22","guid":{"rendered":"https:\/\/2thenew.xyz\/blog\/?p=1531"},"modified":"2016-12-15T18:17:01","modified_gmt":"2016-12-15T12:47:01","slug":"add-page-number-using-page-property-of-css","status":"publish","type":"post","link":"https:\/\/2thenew.xyz\/blog\/add-page-number-using-page-property-of-css\/","title":{"rendered":"Add Page number using Page Property of CSS"},"content":{"rendered":"

In my recent Nodejs project<\/a>, we were required to generate the pdf document from HTML page. We are using iText renderer for doing this. The client had the requirement that each page bottom right needed to have a\u00a0number on it. All these things need to be replicated on every page.<\/p>\n

So for doing this we need to know more about the CSS3 page properties. I found the solution in this documentation http:\/\/www.w3.org\/TR\/css3-page\/ and http:\/\/www.w3.org\/TR\/CSS21\/generate.html#counters<\/p>\n

For doing this I did something like<\/p>\n

@page {\r\n        margin-top: 149px;\r\n        margin-left: 2px;\r\n        margin-bottom: 40px;\r\n        margin-right: 2px;\r\n        size: landscape;\r\n        counter-increment: page;\r\n\r\n     @bottom-right {\r\npadding-right:20px;\r\n        content: \"Page \" counter(page);\r\n      }\r\n\r\n    }\r\n<\/pre>\n
We added an incremental page counter in the page property which can be reset as well. As my counter was incrementing after each page so I defined counter-interment at page level, although depending on the cases you can increment the counter before or after an\u00a0occurrence of any element like.<\/p>\n
.incrementClass:before {\r\n   counter-increment: page;\r\n}  \r\n<\/pre>\n
in above example, counter will be incremented before the incrementClass appears on the page.
\nHope it helps<\/p>\n","protected":false},"excerpt":{"rendered":"
In my recent Nodejs project, we were required to generate the pdf document from HTML page. We are using iText renderer for doing this. The client had the requirement that each page bottom right needed to have a\u00a0number on it. All these things need to be replicated on every page. So for doing this we […]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":190,"footnotes":""},"categories":[1185],"tags":[372,373,355,356],"class_list":["post-1531","post","type-post","status-publish","format-standard","hentry","category-node-js-2","tag-css-page-number","tag-css-page-property","tag-css3","tag-paged-media"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t