|
|
| Line 129: |
Line 129: |
| * https://developer.mozilla.org/en-US/docs/Web/CSS/@media | | * https://developer.mozilla.org/en-US/docs/Web/CSS/@media |
| * https://developer.mozilla.org/en-US/docs/Web/Guide/Printing | | * https://developer.mozilla.org/en-US/docs/Web/Guide/Printing |
|
| |
| ==web-to-print PDF rendering engines==
| |
|
| |
| * your browser (use CTRL+P or CMD+P)
| |
| * 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 @ XPUB==
| |
|
| |
| (13 October 2022)
| |
|
| |
| * https://pad.xpub.nl/p/pagedjs
| |
| * [https://media.xpub.nl/2022/2022-10-13-pagedjs.html Recording of the presentation by Julie Blanc and Julien Taquet]
| |
|
| |
| ==Paged.js example==
| |
|
| |
| * <code>paged.js-polyfill.js</code> you can download here: https://unpkg.com/browse/pagedjs@0.4.1/dist/
| |
| * <code>paged.js-interface.css</code> you 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: <code>$ python3 -m http.server</code>.
| |
|
| |
| <source lang="html">
| |
| <!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>
| |
| </source>
| |
|
| |
| 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!
| |
|
| |
| =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]] |
@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
