Log in / Register

Forum › How do I...?

Footer with page number and flow content

CrazyTux
I'm having a hard time getting a centered page number while using a content flow for the footer. Are there any examples of how to properly get this working?

@page {
    @bottom-center {
        content: counter(page);
    }
}


Is one example of what i've tried with a separate flow defined for @page as well, although the content based footer seems to disappear.

All help is appreciated, thank you!
David J Prokopetz
It really depends on what exactly you're trying to accomplish presentation-wise, but one possible approach is to use a pseudoelement to insert the page counter into the content of the flowed element. For example:

<!DOCTYPE html>
<html lang="en">
<head>
	<style>
		@page {
			size: letter;
			margin: 1in;
			@bottom-center {
				content: element(header);
			}
		}
		h1 {
			position: running(header);
		}
		h1::after {
			display: block;
			text-align: center;
			content: counter(page);
		}
	</style>
</head>
<body>
	<h1>Flowing header</h1>
</body>
</html>
CrazyTux
So I've running footer with page numbers -- now I'm running into an issue where it seems like I can't adjust the height of the footer, the footer is too tall, but there is a grab between:

border-top: 2px solid black


I've set it to have a red background, attaching example.

I want to effectively shrink the top border line and push that down in size towards the bottom of the page.
  1. Screenshot 2024-04-06 at 9.00.12 PM.png‎ 74.5 kB ‎
    Example footer
David J Prokopetz
There are two unrelated issues in play here:

1. The size of a page's margin boxes is determined by the page's margins, not by the size of the boxes' content. If you want the page to have a smaller bottom margin box, simply reduce the page's bottom margin. (If, on the other hand, you want the size of the bottom margin box to vary depending on what's flowed into it, that's a much more complicated question.)

2. The large vertical gap between the flowed content and page number you've appended to it in the provided screenshot is probably caused by a specific CSS style you've applied to the element; it's impossible to assess why that might be happening without seeing a complete example including the full HTML and CSS.

Edited by David J Prokopetz

CrazyTux 
    @page {
        size: 8.5in 11in;*
        margin: 20mm;
        margin-bottom: 175px;
        height: auto;
    }


If I remove margin-bottom from this @page rule the footer adjusts as it should, with the exception that the page footer is no longer there or cut off (not visible).

If I specify margin-bottom: 175px; I can see the page number visible although there is too much space between page number and the flowed content. Also to answer your question there are named pages with variable footers (in height).

Your help is appreciated, thank you!
David J Prokopetz
I'm afraid that's not a complete example. I'd need to see the whole thing, including all HTML and CSS used to produce the provided output.
howcome
One can find reusable code examples in this guide to running headers and footers:

https://css4.pub/2023/running-headers/#page-numbers
CrazyTux
Thank you!