Paged.js: Difference between revisions
No edit summary |
|||
| Line 8: | Line 8: | ||
13 October 2022, with Julien Taquet and Julie Blanc. | 13 October 2022, with Julien Taquet and Julie Blanc. | ||
* https://pad.xpub.nl/p/pagedjs | * Notes: https://pad.xpub.nl/p/pagedjs | ||
* | * Recording of the presentation by Julie Blanc and Julien Taquet: https://media.xpub.nl/2022/2022-10-13-pagedjs.html | ||
* Slides: http://slides.julie-blanc.fr/20221013_xpub-rotterdam.html | |||
==Paged.js example== | ==Paged.js example== | ||
Revision as of 14:06, 3 October 2023
Paged.js (https://pagedjs.org/) is a rendering tool for previewing, inspecting and designing a PDF in the browser, that is known for specifically accommodating designers using web-to-print techniques in their publications and book making practice. Julie and Julien both work (or have worked) as developers on the project, so we can also ask them about Paged.js as an open source project, and what it means to develop and maintain it.
A nice example: XPUB2 (2021/2022) made their graduation catalog with Paged.js, you can see it in action on the sandbot here: https://hub.xpub.nl/sandbot/walkie-talkie/ and there are printed copies in the studio!
Paged.js workshop @ XPUB
13 October 2022, with Julien Taquet and Julie Blanc.
- Notes: https://pad.xpub.nl/p/pagedjs
- Recording of the presentation by Julie Blanc and Julien Taquet: https://media.xpub.nl/2022/2022-10-13-pagedjs.html
- Slides: http://slides.julie-blanc.fr/20221013_xpub-rotterdam.html
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!