User:Youjung/paged.js: Difference between revisions
| Line 13: | Line 13: | ||
[https://pagedjs.org/en/documentation/2-getting-started-with-paged.js/ Getting Started with Paged.js] | [https://pagedjs.org/en/documentation/2-getting-started-with-paged.js/ Getting Started with Paged.js] | ||
1. Download <code>paged.polyfill.js</code> and <code>interface.css</code> link it from the head of your html file. Make a new <code>style.css</code>and also link it. | |||
<script src="js/paged.polyfill.js"></script> | <script src="js/paged.polyfill.js"></script> | ||
| Line 26: | Line 26: | ||
└── paged.polyfill.js | └── paged.polyfill.js | ||
2. To preview the pdf Go Live on your code Editor. | |||
3. You can also download <code>paged.js</code> through command line. | |||
$ npm install -g pagedjs-cli pagedjs | $ npm install -g pagedjs-cli pagedjs | ||
==== Step 2. Design with CSS ==== | ==== Step 2. Design with CSS ==== | ||
| Line 37: | Line 36: | ||
[https://pagedjs.org/en/documentation/5-web-design-for-print/ Web design for print] | [https://pagedjs.org/en/documentation/5-web-design-for-print/ Web design for print] | ||
1. Set the page size and margin | |||
2. Set page order using pagebreak | |||
3. Aligning element | |||
==== Step 3. Make PDF ==== | ==== Step 3. Make PDF ==== | ||
If you're ready to print, make it into a pdf. The total number of pages must be a '''multiple of 4'''. | If you're ready to print, make it into a pdf. The total number of pages must be a '''multiple of 4'''. | ||
1. cmd/ctrl + p to download the pdf. | |||
2. [https://manpages.debian.org/bookworm/texlive-extra-utils/pdfbook2.1.en.html pdfbook] for [[Imposition]] | |||
==== Step 4. Print and bind them together ==== | ==== Step 4. Print and bind them together ==== | ||
Revision as of 12:04, 21 January 2026
For Extraterrestrial Zine Fair 2026, I'm using paged.js.
There are 2 reason for using paged.js instead of weasyprint. First, The Internet Phone Book used paged.js and I'm a big fan of Elliott Cost. Second, paged.js supports nth-child unlike weasyprint. This page is the documentation of making a zine using paged.js.
Title: Tangled Thoughts(TBD)
During the winter break, I spent time drawing tangled threads. I've been weirdly obsessed with these shapes. I think it reflects how chaotic my mind is currently, but also it is quite satisfying to draw and fill them. With the gathered drawings, I compiled them together using paged.js instead of Indesign. It is a good practice to move away from Adobe, although I'm still using Photoshop to edit the drawings.
Working Process
Step 1. File Setup
I used Paged.js as a polyfill in web browsers as it is easy to design looking at the results live through the browser.
1. Download paged.polyfill.js and interface.css link it from the head of your html file. Make a new style.cssand also link it.
<script src="js/paged.polyfill.js"></script> <link href="path/to/file/interface.css" rel="stylesheet" type="text/css" /> <link href='css/style.css' rel='stylesheet' />
├── css │ ├── interface.css │ └── style.css ├── index.html └── js └── paged.polyfill.js
2. To preview the pdf Go Live on your code Editor.
3. You can also download paged.js through command line.
$ npm install -g pagedjs-cli pagedjs
Step 2. Design with CSS
This is the fun part! Using html and css to designing the zine.
1. Set the page size and margin 2. Set page order using pagebreak 3. Aligning element
Step 3. Make PDF
If you're ready to print, make it into a pdf. The total number of pages must be a multiple of 4.
1. cmd/ctrl + p to download the pdf. 2. pdfbook for Imposition
Step 4. Print and bind them together
For my pencil drawings, printing from the free printer would not be an option. The image resolution is bad. I'll have to use the printers from the print station...
Final Output
- Font: TT2020 StyleD italic
- Paper:
- Binding:
- Print method: