css: labeling printed pages in Chrome

I need to make sure my project works on Chrome since I am using electron, so using any other browser is not an option.

After searching for a solution to this issue without success, I attempted the following approach (taken from CSS page x of y for @media print):

The CSS code snippet is:

#content {
    display: table;
}

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

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

And here is the corresponding HTML code:

<div id="content">
  <div id="pageFooter">Page </div>
  multi-page content here...
</div>

While this method works in Firefox, it does not seem to have the desired effect in Chrome. The thead/tfoot of Chrome repeats on every printed page in preview, but fails to increment the counter. The same value appears on each printed page.

I also explored options involving @page, but these methods appear to have stopped working some time ago.

For example (from Browser Support for CSS Page Numbers):

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

Does anyone know a workaround for this issue? Or am I at a dead end? Any Javascript or Node.js solutions are appreciated.

Answer №1

If you want to include page numbers while printing from Chrome or Chromium, a simple solution is to utilize the capabilities of Paged.js.

Paged.js is a JavaScript library that divides your HTML/CSS content into pages, making it suitable for printing as a book which can be previewed in your browser. It ensures that the @page rule and most CSS3 specifications function properly in Chrome.

Solution for dividing your view into printable pages:

To implement this, just add their CDN link in the head section of your page :

<link href="path/to/file/interface.css" rel="stylesheet" type="text/css">

You can then insert page numbers using the automated counter page. For example:

Include the following HTML wherever you wish to show the current page number:

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

Add this CSS code to display the number within the specified div:

.page-number{
  content: counter(page)
}

Furthermore, the library offers easy customization options for page margins, footers, headers, etc.

Solution for displaying numbers (and page breaks) only during printing:

In such scenarios, you should incorporate the Paged.js CDN solely when printing the document. One approach could involve adding a "print me" button that triggers JavaScript actions to:

  1. include the CDN on the page
  2. and then call window.print(); to initiate the print prompt in the browser

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch out the content within a div upon selection

I'm currently working on a palette board project and facing some challenges when switching to a different theme. The initial page is set to have a Warm color palette, but I intend to alter this once the user clicks on the All theme option. Users wil ...

Exploring Angular 2: Integrating External Libraries

As a beginner in Angular and Angular 2, I am interested in incorporating an external library into my project. The library can be found at the following link: In order to use this library, I added the following line to my index.html file before angular: & ...

Error encountered when importing HTML

I am new to jQuery and currently learning it. I have the following code snippet, but unfortunately, my image is not loading for some unknown reason. When I try running the same link through my command line interface, the image shows up without any issues ...

Verifying if another user is currently authenticated in Node.js

I am working on a Node / express app that utilizes Passport for account creation and authentication. I am interested in determining which sessions are currently active, meaning I want to know which users are logged in at any given time. One option could b ...

Is it possible for me to utilize a validation function to display error messages within a specific span id tag?

document.getElementById("button1").addEventListener("click", mouseOver1); function mouseOver1(){ document.getElementById("button1").style.color = "red"; } document.getElementById("button2").addEventListener("click", mouseOver); function mous ...

Scrapy encountering a challenge with retrieving empty pages containing JavaScript code

Every time I try to use scrapy to scrape or view (or similar pages on that site), all I get is a blank page. The page source just shows hidden javascript code, nothing else. I've experimented with different user agents, proxies, settings, and more ( ...

Conceal part of the page initially, then reveal it when clicked

After integrating Rails 3 and JQuery, I encountered an issue where a div containing a rendered partial would not hide when attempting to do so using JQuery in my JavaScript. I want to be able to hide the div initially, then show it upon clicking a button. ...

Implementing filters for varying key values within an array of Objects in React Native

I'm looking to implement a filter on an array containing objects and I want to be able to search based on country, name, or value in the search bar and retrieve results related to that specific query. Can you please guide me on how to achieve this? Cu ...

Troubleshooting Console.log not functioning properly within a Dockerized environment running a Node.js and Express application

I created a Node.js application using a Docker container and the provided Dockerfile looks like this: FROM node:carbon WORKDIR /usr/src/app COPY package*.json ./ RUN npm install COPY . . EXPOSE 8080 CMD [ "npm", "start" ] My issue is that when I try ...

What is the best way to transfer data from a database query to Vue?

I am currently working on an API request that involves calling a SQL query within the function. I want to pass the results to a .vue page utilizing express-vue. Below is the code snippet for the API request: router.get('/search', (req, res, next ...

What is the solution for correcting skewed div content?

Currently, I am applying a transformation to a <div> element using the value of skewX(-18deg). However, I am facing an issue where inserting text into it causes overflow. The content inside the skewed container is reverted back to its original state ...

The widely accepted practice of using PHP code to communicate JSON data either through AJAX or direct output

When it comes to these two PHP codes, I always seem to run into a bit of trouble. Both are functioning perfectly fine with no issues, but I'm curious about what the industry standard is. Is it considered acceptable to output HTML using PHP in this man ...

Facing an issue with promises: Attempting to encapsulate mysql queries for use with NodeJS/Express

My main objective is to create a custom MySQL query wrapper that accepts parameters, passes them to a specific function, and then the MySQL operation is performed by another function which ultimately returns the results. Here is the current version of my ...

Tips for eliminating the "Automated test software is controlling Chrome" notification

Is there a way to hide this default message? While working with Puppeteer, I run into an issue where chromium displays an unwanted message upon launch. https://i.sstatic.net/XD9ve.png ...

Tricks for displaying a dynamic object tooltip in Three.js

Can anyone help me figure out how to create a HUD hint effect for a moving object? I envision something like this: An asteroid is floating through space, and when I click on it, a hint box with information pops up. I've been playing around with thi ...

Add adhesive dashes to the text box

I am looking to add sticky hyphens in a text input field. I have included an image illustrating my requirement. The areas that need fixing are highlighted in red. The first hyphen should appear after every three number inputs, followed by the next one afte ...

Tips for utilizing $regex search in referenced field within MongoDB

I am having trouble with a task that involves using two schemas User Schema { "first_name": String, "last_name": String, "address": String } Employee Schema { user: { type: ObjectId, ref: 'User' }, gross_pay: String, net_p ...

The POST request encountered an error with status code 500 while being processed by the Express.js framework in the IncomingMessage

My current challenge involves creating a HTTP request for a CRUD application using JS. The aim is to add a new user account record to the Logins database. However, every time I attempt this request, it results in a 500 error: To test this, I have written ...

Tips for customizing the CSS on desktop to ensure it does not interfere with content on tablets above it

My goal is to create a grid layout where the buttons align in the same row on desktop, stack with the search bar on one row and the rest of the row below it with some space on the left side. For mobile, I want the FilterButtons stacked on top of each other ...

Leveraging IntersectionObserver to identify the video in view on the screen

Our Objective I aim to implement a swipe functionality for videos where the URL changes dynamically based on the ID of the currently displayed video. Challenges Faced Although I managed to achieve this with code, there is an issue where the screen flashe ...