User:Youjung/paged.js: Difference between revisions
| (5 intermediate revisions by the same user not shown) | |||
| Line 3: | Line 3: | ||
There are 2 reason for using paged.js instead of [https://weasyprint.org/ weasyprint]. First, [https://internetphonebook.net/ The Internet Phone Book] used paged.js and I'm a big fan of [https://elliott.computer/ Elliott Cost]. Second, paged.js supports nth-child unlike weasyprint. This page is the documentation of making a zine using paged.js. | There are 2 reason for using paged.js instead of [https://weasyprint.org/ weasyprint]. First, [https://internetphonebook.net/ The Internet Phone Book] used paged.js and I'm a big fan of [https://elliott.computer/ 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 | == Title: Tangled Thoughts == | ||
During the winter break, I spent time drawing tangled threads. I've been weirdly obsessed with these shapes. I think it reflects | During the winter break, I spent time drawing tangled threads. I've been weirdly obsessed with these shapes. I think it reflects my chaotic mind. But they are satisfying to draw. With the gathered drawings, I compiled them together into a zine. It is a good practice to move away from Adobe, although I'm still using Photoshop to edit the drawings. | ||
== Working Process == | == Working Process == | ||
| Line 27: | Line 27: | ||
2. To preview the pdf Go Live on your code Editor. | 2. To preview the pdf Go Live on your code Editor. | ||
3. You can also download <code>paged.js</code> through command line. | 3. You can also download <code>paged.js</code> through command line. | ||
| Line 37: | Line 38: | ||
1. Set the page size and margin | 1. Set the page size and margin | ||
@page { | |||
size: A5; | |||
margin: 8mm 12mm; | |||
font-family: TT2020StyleD-Regular; | |||
p { | |||
font-size: 9pt; | |||
line-height: 14pt; | |||
} | |||
} | |||
2. Set page order using pagebreak | 2. Set page order using pagebreak | ||
<code>break-before: page;</code> The element should start on a new page | |||
<br><code>break-before: right;</code> The element starts on the next right/left page. | |||
==== Step 3. Make PDF ==== | ==== Step 3. Make PDF ==== | ||
| Line 48: | Line 60: | ||
2. [https://manpages.debian.org/bookworm/texlive-extra-utils/pdfbook2.1.en.html pdfbook] for [[Imposition]] | 2. [https://manpages.debian.org/bookworm/texlive-extra-utils/pdfbook2.1.en.html pdfbook] for [[Imposition]] | ||
⚠️ If you are printing at the '''publication station you do not need imposition''', the printer will do it for you. (costed 42 euros to learn this) ⚠️ | |||
pdfbook2 --paper=a4paper -n -s output.pdf | pdfbook2 --paper=a4paper -n -s output.pdf | ||
-s, --short-edge | -s, --short-edge | ||
-n, --no-crop | -n, --no-crop | ||
Test Prints | |||
<div style="display: flex; gap: 5px;">[[File:Test print2.jpg|frameless]][[File:Test print.jpg|frameless]][[File:Test print 3.jpg|frameless]]</div> | |||
====Step 4. Print and bind them together==== | ====Step 4. Print and bind them together==== | ||
For my pencil drawings, | For better resolution for my pencil drawings, I used the laser printer at the publication studio. | ||
==Final Output== | ==Final Output== | ||
*Font: [https://copypaste.wtf/TT2020/docs/download.html TT2020 StyleD italic] | *Font: [https://copypaste.wtf/TT2020/docs/download.html TT2020 StyleD italic] | ||
*Binding: Saddle stitch binding | |||
*Binding: | *Print method: Laser print, grayscale | ||
*Print method: | [[File:Tangled thoughts-ezgif.com-resize(1).gif|frameless|500x500px]] | ||
Latest revision as of 02:24, 18 March 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
During the winter break, I spent time drawing tangled threads. I've been weirdly obsessed with these shapes. I think it reflects my chaotic mind. But they are satisfying to draw. With the gathered drawings, I compiled them together into a zine. 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
@page {
size: A5;
margin: 8mm 12mm;
font-family: TT2020StyleD-Regular;
p {
font-size: 9pt;
line-height: 14pt;
}
}
2. Set page order using pagebreak
break-before: page; The element should start on a new page
break-before: right; The element starts on the next right/left page.
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
⚠️ If you are printing at the publication station you do not need imposition, the printer will do it for you. (costed 42 euros to learn this) ⚠️
pdfbook2 --paper=a4paper -n -s output.pdf
-s, --short-edge -n, --no-crop
Test Prints
Step 4. Print and bind them together
For better resolution for my pencil drawings, I used the laser printer at the publication studio.
Final Output
- Font: TT2020 StyleD italic
- Binding: Saddle stitch binding
- Print method: Laser print, grayscale
.gif)