CODEWITHSUNDEEP
htmlcssprintingpagination
Elias Soares
Elias Soares

Reputation: 10254

Is there any WORKING CSS method to print page counting?

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>

Upvotes: 6

Views: 3159

Answers (1)

rnevius
rnevius

Reputation: 27092

@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

Upvotes: 2

Related Questions