Getting Started

I’ve got my page rendering as print-preview, but I can’t get the @page rule working, to set the page size etc. I’ve followed your instructions at https://www.pagedjs.org/documentation/05-designing-for-print/#page-rule but you don’t say where this @page should be put. I’ve tried adding it to my hugo custom.scss file and also to your interface.css. Neither seem make it use my new page-size.
I want A4, but it is showing my site in A5.
I’ve got:
@media print {
.docs-sidebar, .no-print, .no-print { / Hide stuff in printouts. */
display: none;
}

  @page {
	  size: A4 portrait;
	  margin-top: 20mm;
	  margin-bottom: 20mm;
	  margin-left: 20mm;
	  margin-right: 20mm;
  }
  
  .chapter{
    break-before: page; /* don't insert blank left-page */
  }
}

Hi @StephenJD!

The css you’re showing should work.
How did you setup pagedjs ?
Would you mind sharing your code for me to check how it’s made?

Thanks!

ju

Thanks.

I’ve now included your theme in my in config.toml with

[[module.imports]]
path = "gitlab.pagedmedia.org/julientaq/pagedjs-hugo.git"

The static pages are done by \layouts\document\single.html

This uses \layouts\partials\preview_book_simple_layout.html

that file has

<head>
{{ partial "pagedjs-header.html" . }}
</head>
{{ partial "print-button.html" }}

I have copied your print-button.html, but use your default pagedjs-header.html

My custom .css is \assets\css\print.css

You can see my website here:
https://life-for-liberia.netlify.app/

The code is here: https://github.com/StephenJD/Life-For-Liberia
Thanks for your help.
Stephen.