Subversion Repositories rld.adobe

# CSS Page property to add Page numbers

## CSS Page property to add Page numbers

In my recent project, we were required to generate the pdf document from HTML page. There was an requirement that each page bottom right needed to have a number on it. All these things need to be replicated on every page. This is done by using the page counter in CSS, a pre-defined counter which represents the current page number.

The page counter starts at 1 and increments automatically at each new page. The property page-break-before is applied to break the page, it is basically used to indicate if a page break should occur immediately before an specified element and if it is set to always, the page break is applied before every element to start the new element at the topof the fresh page.

Page breaks are usually applied to the printed books or documents. In this case, we are applying in a PDF document. 

To know more about CSS3 page properties, you can refer to the following links:

https://www.w3.org/TR/css3-page/

https://www.w3.org/TR/CSS21/generate.html#counters

Following is the code to display the page numbers at the bottom of each page using above properties.

```
.page {
     position: relative;
     height: auto;
     min-height: 750px;
     width: 590px;
     display: block;
     background: rgba(60, 60, 60, 0.28) !important;
     margin: 0 auto 5px;
     page-break-before: always; /*This style rule makes every page element start at the top of a new page:*/
     counter-increment: page
    }
   /*page numbers*/
   div.page:after {
     content: " PAGE - " counter(page);
     position: absolute;
     bottom: 0px;
     right: 15px;
     z-index: 999;
     padding: 2px 12px;
     border-right: 2px solid #23b8e7;
     font-size: 12px;
    }
```

MARKUP :

```

```

This is Page #1
This is page #2
This is page #3
This is page #4

Hope it helps. THANKS

## Print page numbers on pages when printing html

I've read a lot of web-sites about printing page numbers, but still I couldn't make it display for my html page when I try to print it.
So the CSS code is next:

```
@page {
  margin: 10%;

  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}
```

I've tried to put this page rule inside

@media all {
    *CSS code*
}

And outside of it, tried to put it in @media print, but nothing helped me to display the page numbers on my page. I've tried to use FireFox and Chrome(based on WebKit as you know). I think the problem is in my html or css code.
Could somebody show me an example of implementing this @page rule in the big html page with several pages? I just need the code of html page and the code of css file, that works.
P.S. I have the latest supported versions of browsers.

**Answer**

As @page with pagenumbers don't work in browsers for now I was looking for alternatives.
I've found an answer posted by Oliver Kohll.
I'll repost it here so everyone could find it more easily:
For this answer we are not using @page, which is a pure CSS answer, but work in FireFox 20+ versions. Here is the link of an example.
The CSS is:

```
#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}
```

And the HTML code is:

```
<div id="content">
  <div id="pageFooter">Page </div>
  multi-page content here...
</div>
```

This way you can customize your page number by editing parametrs to #pageFooter. My example:

```
#pageFooter:after {
    counter-increment: page;
    content:"Page " counter(page);
    left: 0; 
    top: 100%;
    white-space: nowrap; 
    z-index: 20;
    -moz-border-radius: 5px; 
    -moz-box-shadow: 0px 0px 4px #222;  
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);  
  }
```

This trick worked for me fine. Hope it will help you.