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

Asked

Viewed 3,252 times

5

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

html css paging media-queries

  • If you are still interested, I recommend taking a look at the edition I made. I think it meets your request.

2 answers

4

Hello!

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

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

  2. The fixed footer method. Link

After a lot of head-breaking, 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 on Chrome.)

Basically, by mixing a little bit of each technique, I was able to create this shape that replicates a h3 in position: absolute and always plays the page to 100vh except in the print view. (So going to the bottom of the page).

The rule I created for page numbering, in this case, which can be adapted to the situation of each one, was to create a page numbering for every 10 ps present in the text, which was the average of the example. Thus it does not number more nor less.

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

I leave here the job done: Jsfiddle - No Total Pages

EDIT

Follow a new version capable of numbering the total of pages: Jsfiddle - With Total Pages

Thanks!

I hope I’ve helped!

0

I do like this

<style>
      #rodape::after { content: '| Página ' counter(page); }
      #rodape {
        /* string-set: footing content(); */
        running: footer;
        position: fixed;
        bottom: -10px;
        left: 0;
        right: 10px;
        height: 12px;

        /** Extra personal styles **/
        color: black;
        text-align: right;
        line-height: 12px;
        padding: 2em auto 0;
        max-width: 767px;
      }
      @page {
        size: A4 portrait;
              margin: 1.5cm 1cm 1.2cm;
        counter-increment: page;
         }
</style>

      <div id="rodape">
</div>

Browser other questions tagged html css paging media-queries

You are not signed in. Login or sign up in order to post.