Menu
I've tried to play around with @page and counter(page) features of CSS3, but I can't see any page numbers added to the print output. No matter what I do, looks like this is simply not working.
My scaffold looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
@page {
counter-increment: page;
counter-reset: page 1;
@top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
</style>
<head>
<body>
<div>
Lorem ipsum dolor...
/* this gets long, 2 pages of text */
</div>
</body>
</html>
The way I'm testing this out is that I'm opening the page in the browser, printing it to a PDF file and finally I'm verifying the contents. In different browsers the output is a bit different, but nowhere I can see proper page numbers.
OS: Linux Mint
Browsers: Chromium 25.0.1364.160, Firefox 20.0.1, Opera (latest from package manager)
Any ideas?
299
In the CSS we are going to do three key things: Initialize the counter on the parent div using counter-reset. Increment the counter value by 1 on the child div p using counter-increment. Add the counter variables before the div p content using the :before pseudo selector.
If you are looking to add page numbers when printing under Chrome/Chromium, one easy solution is to use Paged. js. This JS library takes your HTML/CSS and cuts it into pages, ready to print as a book, that you will preview in your browser. It makes the @page and most the CSS3 specifications work for Chrome.
CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage, or to change the numbering on ordered lists.
The page-break-after property adds a page-break after a specified element. Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed. Note: You cannot use this property on an empty <div> or on absolutely positioned elements.
Browser support for this is not up to par.
@page {margin: 2in} is supported in new versions of Firefox, but not other parameters of @page. I believe this is true of other browsers as well.
175
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
