Paged.js: Difference between revisions

Latest revision as of 12:49, 9 February 2024

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 page at media.xpub.nl: 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.js you can download here: https://unpkg.com/browse/pagedjs@0.4.1/dist/
paged.js-interface.css 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: $ 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!

@@ Line 1: / Line 1: @@
-=Paged.js=
+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)
+October 2022, with Julien Taquet and Julie Blanc.
+{{#Widget:Video|mp4=https://media.xpub.nl/2022/2022-10-13-pagedjs.480p.mp4|style=height:400px;text-align:center;}}
-* https://pad.xpub.nl/p/pagedjs
+* Notes: 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]
+* Recording page at media.xpub.nl: https://media.xpub.nl/2022/2022-10-13-pagedjs.html
+* Slides: http://slides.julie-blanc.fr/20221013_xpub-rotterdam.html
 ==Paged.js example==
@@ Line 16: / Line 21: @@
 '''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">
+<syntaxhighlight lang="html">
 <!DOCTYPE html>
 <html>
@@ Line 38: / Line 43: @@
 </body>
 </html>
-</source>
+</syntaxhighlight>
 You can also use one of the Paged.js '''starterkits''': https://gitlab.coko.foundation/pagedjs/starter-kits