Paged Media CSS examples: Difference between revisions
No edit summary |
|||
| Line 6: | Line 6: | ||
@page { | @page { | ||
size: A5 portrait; | size: A5 portrait; | ||
margin: 10mm; | |||
} | } | ||
</source> | </source> | ||
| Line 21: | Line 22: | ||
@bottom-center { | @bottom-center { | ||
content: "Testing | content: "Testing margin notes"; | ||
} | } | ||
} | } | ||
| Line 34: | Line 35: | ||
@bottom-left { | @bottom-left { | ||
content: "Testing | content: "Testing margin notes"; | ||
} | } | ||
@bottom-center { | @bottom-center { | ||
content: " | content: "More margin notes"; | ||
} | } | ||
} | } | ||
| Line 50: | Line 51: | ||
@bottom-center { | @bottom-center { | ||
content: "Testing | content: "Testing margin notes"; | ||
} | } | ||
} | } | ||
| Line 87: | Line 88: | ||
} | } | ||
</source> | </source> | ||
==pagenumbers== | ==pagenumbers== | ||
| Line 101: | Line 101: | ||
==pagebreaks== | ==pagebreaks== | ||
Force page breaks before each h1 | Force page breaks before each h1 | ||
Revision as of 10:58, 17 March 2023
@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: customsection;
}
@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)