Paged Media CSS examples
@page
@page {
size: A5 portrait;
margin: 10mm;
}
@page:right @page:left
@page:right {
margin-left: 3cm; /*inner*/
margin-right:1cm; /*outer*/
@bottom-right {
content: "Testing 123!!!";
}
@bottom-center {
content: "Testing margin notes";
}
}
@page:left {
margin-right: 10mm; /*inner*/
margin-left: 15mm; /*outer*/
@bottom-left {
content: "Testing margin notes";
}
@bottom-center {
content: "More margin notes";
}
}
@page customsection
@page custom{
background-color: lightyellow;
@bottom-center {
content: "Testing margin notes";
}
}
section#custom{
page: custom;
}
@page:first
@page:first {
@bottom-center {
content: "";
}
@bottom-right {
content: "";
}
}
@page:customsection
@page customsection {
background-color: pink;
@top-center {
content: "Hello :)";
}
}
section#custom{
page: customsection;
}
pagenumbers
@page{
@bottom-left{
content: counter(page);
}
}
pagebreaks
Force page breaks before each h1
h1 {
break-before: always;
}
Start a section on the right page
section {
break-before: right;
}
hyphens
html{
hyphens: auto;
hyphenate-limit-chars: 8;
}
display links in print
a[href]:after {
content: ' (' attr(href) ')';
}
Links
Paged Media CSS references
Using media queries: @media print, @media screen
- https://developer.mozilla.org/en-US/docs/Web/CSS/@media
- https://developer.mozilla.org/en-US/docs/Web/Guide/Printing
web-to-print PDF rendering engines
- Paged.js https://www.pagedjs.org/
- Weasyprint https://weasyprint.readthedocs.io/
- Reportlab (Python Library) https://www.reportlab.com/
- Prince https://www.princexml.com/
- LaTeX https://www.latex-project.org/
- ConTeXt https://wiki.contextgarden.net/Main_Page
- wkhtmltopdf https://wkhtmltopdf.org/
PDF-generating oneliners
$ pandoc -f markdown --pdf-engine weasyprint -c stylesheet.css filename.md -o filename.pdf
$ weasyprint -s stylesheet.css filename.html filename.pdf
Paged.js workshop
(13 October 2022)