Menu
I've searching for any solution to print page counting with CSS, but every "solution" found does not work in any browser, no valid solutions, only tips.
Aparently,
@page {
@bottom-left {
content: "blablabla"
}
}
Is a valid CSS3 rule, but is not working in any browser.
Can someone please help-me?
This is a NOT WORKING example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test example</title>
<style>
@page {
@bottom-left {
counter-increment: page;
content: counter(page);
}
}
</style>
</head>
<body>
<div id="content">
<!-- LONG CONTENT HERE -->
</div>
</body>
</html>
701
This is done by using the page counter in CSS, a pre-defined counter which represents the current page number. The page counter starts at 1 and increments automatically at each new page.
This rule allows you to specify different style for different media. So, you can define different rules for screen and a printer. The example below specifies different font families for screen and print. The next CSS uses the same font size for both screen as well as printer. <style type = "text/css"> <!-- @
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.
@page { @bottom {} } is NOT valid CSS3.
You have the following available to you:
@bottom-right-corner
@bottom-right
@bottom-center
@bottom-left
@bottom-left-corner
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
