Paged Media CSS examples: Difference between revisions
No edit summary |
No edit summary |
||
| Line 145: | Line 145: | ||
$ weasyprint -s stylesheet.css filename.html filename.pdf | $ weasyprint -s stylesheet.css filename.html filename.pdf | ||
=Paged.js= | |||
==Paged.js workshop== | ==Paged.js workshop== | ||
| Line 189: | Line 191: | ||
In general Paged.js has a lot of documentation on their website with lots of examples, check it out! | In general Paged.js has a lot of documentation on their website with lots of examples, check it out! | ||
=Pandoc= | |||
https://pandoc.org/ | |||
You can use Pandoc to generate PDF's directly from other document formats, like Markdown, wikitext or Libre Office. | |||
A range of PDF engines are supported at the moment, including paged.js, weasyprint and LaTeX. You need to select the one of choice using the <code>--pdf-engine</code> option, and have the PDF engine installed on your computer. | |||
You can follow this page for instructions: https://pandoc.org/MANUAL.html#creating-a-pdf | |||
[[Category:Cookbook]] | [[Category:Cookbook]] | ||
[[Category:PagedMedia]] | [[Category:PagedMedia]] | ||
Revision as of 11:19, 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 custom sections
@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: "";
}
}
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
Paged.js workshop
(13 October 2022)
Paged.js example
paged.js-polyfill.jsyou can download here: https://unpkg.com/browse/pagedjs@0.4.1/dist/paged.js-interface.cssyou can download here: https://gitlab.coko.foundation/pagedjs/interface-polyfill
Remember: you need to open a Paged.js document through a web server. You can use a local server, either through your code editor or by running a local server in Python: $ python3 -m http.server.
<!DOCTYPE html>
<html>
<head>
<title>Paged.js template example</title>
<meta charset="utf-8">
<!-- load paged.js
(the polyfill is used to turn your whole page into pages)
-->
<script src="paged.js-polyfill.js"></script>
<!-- load the paged.js interface stylesheet -->
<link href="paged.js-interface.css" rel="stylesheet" type="text/css">
<!-- load your own stylesheet -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<section id="cover"></section>
<section id="introduction"></section>
<section class="article"></section>
<section id="backcover"></section>
</body>
</html>
You can also use one of the Paged.js starterkits: https://gitlab.coko.foundation/pagedjs/starter-kits
And this cheatsheet is helpful too: https://pagedjs.org/documentation/cheatsheet/
In general Paged.js has a lot of documentation on their website with lots of examples, check it out!
Pandoc
You can use Pandoc to generate PDF's directly from other document formats, like Markdown, wikitext or Libre Office.
A range of PDF engines are supported at the moment, including paged.js, weasyprint and LaTeX. You need to select the one of choice using the --pdf-engine option, and have the PDF engine installed on your computer.
You can follow this page for instructions: https://pandoc.org/MANUAL.html#creating-a-pdf