Print page numbers on pages when printing html

Question

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

User · Answer

page               margin-top 21   important                top-left              content  element header                                bottom-left               content  element footer     div header                position  running header                              div footer                position  running footer               border-bottom  2px solid black                              pagenumber before               content  counter page                              pagecount before               content  counter pages                         lt div class  footer  style  font-size 12pt  font-family  Arial  font-family  Arial   gt                   lt span gt Page  lt span class  pagenumber   gt  of  lt span class  pagecount   gt  lt  span gt               lt  div  gt

User · Answer

This javascript will add absolute positioned div s with pagenumbers on the right bottom corner and works in all browsers  A4 height   297mm   1123px 96dpi   lt html gt       lt head gt           lt style type  quot text css quot  gt               page                 size  A4                margin  0                              body                 margin  0                         lt  style gt       lt  head gt       lt body gt           lt script type  quot text javascript quot  gt            window onload   addPageNumbers             function addPageNumbers                 var totalPages   Math ceil document body scrollHeight   1123      842px A4 pageheight for 72dpi  1123px A4 pageheight for 96dpi               for  var i   1  i  lt   totalPages  i                    var pageNumberDiv   document createElement  quot div quot                  var pageNumber   document createTextNode  quot Page  quot    i    quot  of  quot    totalPages                 pageNumberDiv style position    quot absolute quot                 pageNumberDiv style top    quot calc   quot    i    quot     297mm - 0 5px   - 40px  quot     297mm A4 pageheight  0 5px unknown needed necessary correction value  additional wanted 40px margin from bottom own element height included                pageNumberDiv style height    quot 16px quot                 pageNumberDiv appendChild pageNumber                 document body insertBefore pageNumberDiv  document getElementById  quot content quot                   pageNumberDiv style left    quot calc 100  -   quot    pageNumberDiv offsetWidth    quot px   20px   quot                                      lt  script gt           lt div id  quot content quot  gt              Lorem ipsum              lt  div gt       lt  body gt   lt  html gt

User · Answer

This is what you want     page       bottom-right       content  counter page    of   counter pages

User · Answer

I know this is not a coding answer but it is what the OP wanted and what I have spent half the day trying to achieve - print from a web page with page numbers   Print to pdf without the numbers Run it through ilovepdf here https   www ilovepdf com add pdf page number which adds the page numbers  Yes  it is two steps instead of one but I haven t been able to find any CSS option despite several hours of searching  Real shame all the browsers removed the functionality that used to allow it

User · 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    lt div id  content  gt     lt div id  pageFooter  gt Page  lt  div gt    multi-page content here     lt  div gt    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

User · Answer

Can you try this  you can use content  counter page           page           bottom-left               content  counter page      counter pages                      Ref  http   www w3 org TR CSS21 generate html counters  http   www princexml com doc 9 0 page-numbers

User · Answer

Try to use https   www pagedjs org   It polyfills page counter  header- footer-functionality for all major browsers   page      bottom-left       content  counter page    of   counter pages          It s so much more comfortable compared to alternatives like PrinceXML  Antennahouse  WeasyPrince  PDFReactor  etc     And it is totally free  No pricing or whatever  It really saved my life

[html] Print page numbers on pages when printing html

Examples related to html

Examples related to css

Examples related to printing-web-page