how does one enable page numbers like in your sample pdfs?

[milkshakeuk]

see title

[milkshakeuk]

I figured it out

@page {
  size: A4;
  margin: 1.20cm;

  @bottom-center {
    content: "Page " counter(page) " of " counter(pages);
  }
}

[FlorianHeigl]

for others: the above snippet is from custom.css, not the pdf stylesheet. since it's defined for @page it only applies to pag(inat)ed media and as such you don't see it except on print. I found a reference to a 'smashing magazine' article: designing for print with css which helped me understand a bit.

@milkshakeuk did you manage to also use @top-center somehow? I'm completely at a loss trying to get a chapter title on every page.

[nbanyan]

@FlorianHeigl https://printcss.net/articles/page-margin-boxes has a lot of good info on print specific CSS and those location tags. In my attempts to use various HTML to PDF solutions I've found that some features like these may not work with some tools. It's possible that CSS features like these can work when using a browser's print dialog while being ignored by pypdf.

[kamilkrzyskow]

Hello,
thanks for the margin-boxes resource, it helped to see what is truly happening @nbanyan 🤟
Since I'm at it, thanks for the PR #54 as well 🙏

The counter CSS can be added to either the pdf.scss or custom.css, doesn't matter, as long the scope is the same.
The page count is incorrect when setting explicit: true, because the page.index doesn't take that flag into account and uses default indexes. I've added a fix in a hook here:

• https://github.com/Fiori-Tracker/fiori-tracker.github.io/blob/559ae14298825f5e895ea081b88887dda1f2f101/overrides/.pdf/hook.py#L161-L172

As for the @top-center text on all pages, there are multiple issues with this and I'm not even sure if I my assumption is fully correct, but I also fixed it for Nype and Fiori Tracker here:

• https://github.com/Fiori-Tracker/fiori-tracker.github.io/blob/559ae14298825f5e895ea081b88887dda1f2f101/overrides/.pdf/hook.py#L127-L158

(open the commits to see all relevant changes)

Each page is rendered separately with 2 covers, and the Jinja files for the covers get access to macros / page metadata.
However, the code for the covers is attached to them, so in case of setting covers: limits, where the covers are only attached to the first and last Markdown page, there are issues with rendering the text.

Therefore to get @page { @top-center { content: "Text" }} to work it needs to be put in the pdf.scss file or custom.css, for all pages not just the ones with cover pages.
So you might see the problem, which is that the pdf.scss doesn't have access to macros / page metadata like the title, so I've added a crude placeholder remapping logic in the solution above, where I can access both stylesheets, and page metadata.

Also the example SCSS / template files could get some love, and be simplified quite a bit.
I've done my best to do that alongside the fixes mentioned above.

I can't find the time to make a new Issue and PR for this right now, but maybe during the next 2 weeks I will ✌️