CSS Page Numbers Not Working

Browser Support for CSS Page Numbers

This does not seem to work anymore. Appears it only worked for a short time and browser support was removed!

Counters have to be reset before they can be used, according to https://developer.mozilla.org/en-US/docs/CSS/Counters.

You can set your starting number to whatever, the default is 0.

Example:

@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

... in theory. In real world only PrinceXML supports this.

Cannot find a way to make counter-increment work (Chrome/Firefox)

I don't think you can achieve what you're trying to. The reason you get "Page 1" is because you're incrementing the counter inside the div.footer:after declaration, which appears only once in your HTML code.

The CSS counter, when it's read, is calculated based on that element's location in the document, like described in the specs: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

So in your case, you can think about it like this:

div.footer:after {
  content: "Page " counter(page); /* when displayed, read the value of `page` */
}
p {
  counter-increment: page; /* counter increments with every occurrence of a <p> tag */
}

and

<div class="footer"></div> <!-- `page` counter is always 0, as no occurrences of a <p> tag yet -->
<p>Hello world page 1</p> <!-- sets counter to 1 -->
<p>Hello world page 2</p> <!-- sets counter to 2 -->

<p>Hello world page 1</p> <!-- sets counter to 1 -->
<div class="footer"></div> <!-- `page` counter is always 1, as there was a single occurrence of a <p> tag -->
<p>Hello world page 2</p> <!-- sets counter to 2 -->

<p>Hello world page 1</p> <!-- sets counter to 1 -->
<p>Hello world page 2</p> <!-- sets counter to 2 -->
<div class="footer"></div> <!-- `page` counter is always 2, as there were two occurrences of a <p> tag -->

Print page numbers on pages when printing html

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.

How to use CSS counter increment for dynamic page numbers

So I was never able to get this to work for my case. I know other cases may work with above answers, but I could not get the Front-End alone to generate the dynamic page numbers.

I used help from my back-end, which is PHP in my case and used a plugin called wkhtmltopdf.

This solved my issue, https://stackoverflow.com/a/13496899/6000966.

I was able to remove the logic from the front-end and place it on the back-end and let it handle the dynamic page numbers.

I would advise if the HTML pages are using dynamic data from the back-end, something like this is the way to go.

Static pages on the other hand should work with the above answers.

CSS counter-increment page on print view issue

I am afraid that adding count print numbers with css is not possible.

You might get around this issue if Firefox is an option as MDN notes:

Using CSS counter to print page numbers only works on Firefox. It’s unclear if the behavior is defined in the specification and whether or not it would be supported in other browsers at all. See issue filed with Chromium.

#print-foot:after {
    content: counter(page);
    counter-increment: page;
  }

See full code snippet in JSFiddle.

Keep in mind that although possible in Firefox, this feature would be considered extremely buggy and it would be difficult to do further customizations and styling. This feature is impossible in in-browser printing.

If server side PDF generation is an option, there are a couple of libraries that can work for you, such as PDFjs, Prince and so on.

Not able to set page number in latest chrome browser using print css

I found a way to do this in chrome using jquery somehow.

var bottom = 0;$(document).ready(function() {  $("table:nth-child(9n)").each(function() {    bottom -= 5;    botString = bottom.toString();    var $counter = $('.footer.first').clone().removeClass('first');    $counter.css("bottom", botString + "vh");    ($counter).insertBefore('.insert');  });});

@charset "utf-8";/* CSS Document */
@page {   size:8.27in 11.69in;    margin: 0.5cm; }

body { font-family:"Courier New", Courier, monospace; line-height: 1.5; font-size: 11pt; }.header { position:fixed; top:0; text-align:center; width:100%; margin: 0 auto; height:100px; bottom:1em; }
.page-layout {        page-break-after: always; position: relative;    width: 100%;    top:2em;   //match size of header    left:0px;    right:0px;                }        body { counter-reset: page; }     .footer {text-align:center; width:100%; margin:0 auto; position: absolute; }.footer::after { top: 95vh; position: relative;    white-space: nowrap;     z-index: 20px; width:100%;  margin:0 auto; text-align:center;    counter-increment: page;   content:"Page " counter(page);} .inv-details {  }.tstripe { border-top:2px dashed #000;} table { page-break-inside: avoid;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="footer first"></div> <div class="insert"></div><div class="header">Commercial Invoice</div><div class="page-layout">
<table class="inv-details" width="100%"> <tr>     <td>Invoice Number</td>        <td>Purpose of Shipment</td>        <td>Curr <br /> USD</td>        <td>Ult Dest. <br /> US </td>    </tr>    <tr>     <td>Export Dt <br /> 8/14/2017 </td>        <td>C.I. References </td>        <td>Pkgs <br /> 1 <br /> OTH </td>        <td>Bill T/C <br /> 1378-4267-0 </td>      </tr></table><table class="tstripe" width="100%"> <tr>     <td width="50%">Shipper: <br />        VENNY PERSAUD <br />        SBC INC, <br />        130 MATHESON BLVD, E, <br />        UNIT 1</td>        <td width="50%">Consignee: <br />        Marlon Browder <br />        Marlon Browder <br />        320 E GILLESPIE ST         </td>      </tr>      <tr>       <td width="50%">MISSISSAUGE <br />        ON L4Z1Y6 CA (866) 330-1272 <br />        ID / EIN: </td>        <td width="50%">STARKVILLE <br />        MS 39759 US (622) 617-9890 <br />        ID / EIN:        </td>      </tr></table><table class="tstripe" width="100%"> <tr>     <td  valign="top" width="50%">         Broker <br />            FedEx Ground's Broker        </td>        <td>         Importer <br />            VENNY PERSAUD <br />            SBC INC, <br />            130 MATHESON BLVD, E, <br />            UNIT 1 <br />            MISSISSAUGA <br />            ON L4Z1Y6 CA (866) 330 - 1272 <br />            ID / EIN: <br />        </td>    </tr></table>

<!-- Item 1 --><table class="tstripe" width="100%">    <tr>        <td>Part Nbr:</td>        <td>Marks / Nbrs: </td>        <td>Cntry MFG: US </td>        <td> Net Wgt: 0.00 lbs</td>    </tr></table><table width="100%">    <tr>        <td>HS Code: 9503.90 </td>        <td>Unit Qty: 1.00 PCS </td>        <td>Unit Value: 5.600000</td>        <td>Commodity Value: 5.60 </td>    </tr>    <tr>        <td colspan="4">            Desc: Foil Ballon        </td>      </tr></table>

<!-- Item 2 --><table class="tstripe" width="100%"> <tr>     <td>Part Nbr:</td>        <td>Marks / Nbrs: </td>        <td>Cntry MFG: US </td>        <td> Net Wgt: 0.00 lbs</td>    </tr></table><table width="100%"> <tr>     <td>HS Code: 9503.90 </td>        <td>Unit Qty: 1.00 PCS </td>        <td>Unit Value: 5.600000</td>        <td>Commodity Value: 5.60 </td>    </tr>    <tr>     <td colspan="4">         Desc: Foil Ballon        </td>      </tr></table>
<!-- Item 3 --><table class="tstripe" width="100%">    <tr>        <td>Part Nbr:</td>        <td>Marks / Nbrs: </td>        <td>Cntry MFG: US </td>        <td> Net Wgt: 0.00 lbs</td>    </tr></table><table width="100%">    <tr>        <td>HS Code: 9503.90 </td>        <td>Unit Qty: 1.00 PCS </td>        <td>Unit Value: 5.600000</td>        <td>Commodity Value: 5.60 </td>    </tr>    <tr>        <td colspan="4">            Desc: Foil Ballon        </td>      </tr></table>
<!-- Item 4 --><table class="tstripe" width="100%">    <tr>        <td>Part Nbr:</td>        <td>Marks / Nbrs: </td>        <td>Cntry MFG: US </td>        <td> Net Wgt: 0.00 lbs</td>    </tr></table><table width="100%">    <tr>        <td>HS Code: 9503.90 </td>        <td>Unit Qty: 1.00 PCS </td>        <td>Unit Value: 5.600000</td>        <td>Commodity Value: 5.60 </td>    </tr>    <tr>        <td colspan="4">            Desc: Foil Ballon        </td>      </tr></table>
<!-- Item 5 --><table class="tstripe" width="100%">    <tr>        <td>Part Nbr:</td>        <td>Marks / Nbrs: </td>        <td>Cntry MFG: US </td>        <td> Net Wgt: 0.00 lbs</td>    </tr></table><table width="100%">    <tr>        <td>HS Code: 9503.90 </td>        <td>Unit Qty: 1.00 PCS </td>        <td>Unit Value: 5.600000</td>        <td>Commodity Value: 5.60 </td>    </tr>    <tr>        <td colspan="4">            Desc: Foil Ballon        </td>      </tr></table>

<!-- Item 6 --><table class="tstripe" width="100%">    <tr>        <td>Part Nbr:</td>        <td>Marks / Nbrs: </td>        <td>Cntry MFG: US </td>        <td> Net Wgt: 0.00 lbs</td>    </tr></table><table width="100%">    <tr>        <td>HS Code: 9503.90 </td>        <td>Unit Qty: 1.00 PCS </td>        <td>Unit Value: 5.600000</td>        <td>Commodity Value: 5.60 </td>    </tr>    <tr>        <td colspan="4">            Desc: Foil Ballon        </td>      </tr></table>
<!-- Total --><table class="tstripe" width="100%"  style="margin-top:30px;"> <tr>     <td align="right">Total Shipment Weight::</td>        <td>1</td>        <td align="right">Total Commodity </td>        <td align="right">29.12</td>     </tr>     <tr>      <td align="right" colspan="3">Terms of Sale:</td>        <td align="right">FCA</td>      </tr>      <tr>       <td align="right"  colspan="3">Freight:</td>        <td align="right">0.00</td>      </tr>      <tr>       <td align="right"  colspan="3">Insurance:</td>        <td align="right">0.00</td>      </tr>      <tr>       <td align="right"  colspan="3">Others:</td>  <td align="right">0.00</td>       </tr>       <tr>        <td align="right"  colspan="3">Total Invoice Value:</td>        <td align="right">29.12</td>       </tr>         </table>
<table><tr><td> Comments</td></tr><tr><td>1)  </td></tr><tr><td>2) </td></tr><tr><td>3) </td></tr><tr> <td>Tracking Numbers: 738443302589 </td> </tr> <tr> <td>I declare all information in this invoice to be true and correct. </td>   </tr>  <tr> <td>Signature of shipper: VENNY PERSAUD <span style="float:right;">8/14/2017</span></td></tr></table></div>

CSS Counter Increment is not working

You should have this css on the ul itself:

.moving-steps {
    counter-reset: headings;
}

and counter-increment should only contain headings:

.moving-steps > li:before {
    counter-increment: headings;
}

Check out this JS Fiddle:

.moving-steps {  counter-reset: headings;  list-style: none;}.moving-steps > li:before {  background: none repeat scroll 0 0 #8F8888;  border-radius: 15px;  color: #FFFFFF;  counter-increment: headings;  content: counter(headings, decimal);  display: block;  float: left;  font-size: 16px;  font-weight: bold;  height: 25px;  line-height: 26px;  margin-bottom: 0;  margin-right: 5px;  text-indent: 8px;  width: 25px;}

<ul class="moving-steps">  <li>First item</li>  <li>Second item</li>  <li>Third item</li></ul>