Question 186482 in PHP Question posted in
Official manual can be found here.

Php – Is there any way to print page number on HTML page with simple CSS in 2023

I am trying to print the page number on the HTML page, but nothing is working for me. I have already uses these codes

First code is here…

#content {
    display: table;
}

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

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

Second Code is here…

@page {
  @bottom-left {
    content: counter(page) ' of ' counter(pages);
  }
}

I am waiting for your response. 🙂

Tags:

2

Answers


  1. 0

    No, you cannot directly print page numbers on an HTML page using CSS alone. CSS is primarily used for styling and layout purposes, and it doesn’t have built-in features for generating page numbers.

    However, you can achieve this by using a combination of CSS and JavaScript or by utilizing CSS print media queries. Here are two approaches you can consider:

    1. Using JavaScript:
    • Create a JavaScript function that generates and inserts page numbers dynamically into your HTML document.
    • You can use JavaScript to calculate the number of pages, based on the content and desired layout.
    • Update the page number dynamically whenever the content changes or the page is resized.
    • Apply CSS styles to position and
      style the generated page numbers.
    1. Using CSS print media queries:
    • Define a separate CSS file specifically for printing using the @media
      print rule. Inside the print media query, use the content property
      with the counter() function to generate and display page numbers.
      Define CSS styles to position and style the page numbers on the
      printed pages.

    For example:

    @media print {
  .page-number:after {
    content: "Page " counter(page);
  }
}

<div class="page-number"></div>

    • In your HTML, add an element with the class "page-number" where you want the page number to appear. For example, refer to the last line in the above code.

    • When you print the page, the content property in the CSS will generate and display the page number on each printed page.

    Remember that the second approach will only work when printing the page, not for displaying page numbers on the screen.

    Login or Signup to reply.
  2. 0

    You should use CSS and JavaScript
    this video can help try it.
    https://www.youtube.com/watch?v=-fhJJYtguWI

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search