In my recent project we need 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 need to have number on it. All these things need to be replicated on every page. 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
For doing this I did something like

@page {
        margin-top: 149px;
        margin-left: 2px;
        margin-bottom: 40px;
        margin-right: 2px;
        size: landscape;
        counter-increment: page;

     @bottom-right {
padding-right:20px;
        content: "Page " counter(page);
      }

    }

Its just so simple we added and 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 occurrence of any element like.

.incrementClass:before {
   counter-increment: page;
}  

in above example counter will be incremented before the incrementClass appears on the page.
Hope it helps

3 thoughts on “Add Page number using Page Property of CSS

  1. Section 21

    Hi, i read your blog from time to time and i own a similar one
    and i was just wondering if you get a lot of spam comments?

    If so how do you prevent it, any plugin or anything you can suggest?

    I get so much lately it’s driving me mad so any help is very much appreciated.

    Reply
  2. Look At This

    Heya i’m for the first time here. I came across this board and I find It really useful & it helped me out much. I hope to present something again and aid others like you aided me.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe to our Blog

Get latest articles straight to your inbox. Enter your email address below: