How to put the page number to be printed with CSS in @media print

Navigation
4

I want to put the page number when the user wants to print my web page. For example, when it will print my page, and it will be broken in two, I want it to appear "page 2/2" and "2/2" on pages, using CSS.

    
asked by anonymous 26.04.2017 / 21:20

1 answer

4

Hello

You have already searched enough and found the two currently flawed methods that are in every corner of the web:

  • The method using @page with bottom-right . Link

  • The method per footer fixed. Link

    • After much breaking my head, I think I managed to come up with something viable that is yet to be tested on all browsers. (For now I can guarantee it worked in Chrome.)

    Basically, by mixing a bit of each technique, I was able to create this form that replicates a h3 to position: absolute and always plays the page to 100vh unless in print view. (Going so far to the bottom of the page).

    The rule that I created for page numbering, in this case, could be adapted to the situation of each one, was to create a page numbering for every 10% with% s present in the text, which was the average of the example. This way he does not number more or less.

    Unfortunately, this way it is not possible to put the total number of pages, because what I did was to simulate a total number of pages based on number of paragraphs.

    I leave here the work done: JSFiddle - No Total Pages

    EDIT

    Here is a new version that is able to number the total of pages : JSFiddle - With Total Pages

    Thanks!

    I hope I have helped!

        
    03.05.2017 / 21:28
    How to know which version of ionic is being used in my project How to pick up / drop object in localstorage?