User:Youjung/paged.js - Revision history

Youjung: /* Final Output */

2026-03-18T00:24:27Z

Final Output

← Older revision		Revision as of 02:24, 18 March 2026
Line 79:		Line 79:
	*Binding: Saddle stitch binding		*Binding: Saddle stitch binding
	*Print method: Laser print, grayscale		*Print method: Laser print, grayscale
			[[File:Tangled thoughts-ezgif.com-resize(1).gif\|frameless\|500x500px]]

Youjung: /* Step 4. Print and bind them together */

2026-01-30T08:44:29Z

Step 4. Print and bind them together

← Older revision		Revision as of 10:44, 30 January 2026
Line 72:		Line 72:

	====Step 4. Print and bind them together====		====Step 4. Print and bind them together====
	~~For my pencil drawings, printing from the free printer would not be an option.~~ For better resolution for my drawings, I used the laser printer at the publication studio.		For better resolution for my pencil drawings, I used the laser printer at the publication studio.

	==Final Output==		==Final Output==

Youjung: /* Step 2. Design with CSS */

2026-01-30T08:43:29Z

Step 2. Design with CSS

← Older revision		Revision as of 10:43, 30 January 2026
Line 38:		Line 38:

	1. Set the page size and margin		1. Set the page size and margin

	~~Set the size and margin.~~

	@page {		@page {
Line 62:		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, 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...<div style="display: flex; gap: 5px;">[[File:Test print2.jpg\|frameless]][[File:Test print.jpg\|frameless]][[File:Test print 3~~.~~jpg\|frameless]]</div>~~		For my pencil drawings, printing from the free printer would not be an option. For better resolution for my 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]
	*Paper:		*Binding: Saddle stitch binding
	*Binding:		*Print method: Laser print, grayscale
	*Print method:

Youjung: /* Step 2. Design with CSS */

2026-01-30T08:39:18Z

Step 2. Design with CSS

← Older revision		Revision as of 10:39, 30 January 2026
Line 38:		Line 38:

	1. Set the page size and margin		1. Set the page size and margin

			Set the 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		<code>break-before: page;</code> The element should start on a new page
	<code>break-before: right;</code> The element starts on the next right/left page.		<br><code>break-before: right;</code> The element starts on the next right/left page.

	~~3. Aligning element~~

	==== Step 3. Make PDF ====		==== Step 3. Make PDF ====

Youjung at 08:37, 30 January 2026

2026-01-30T08:37:47Z

← Older revision		Revision as of 10:37, 30 January 2026
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~~(TBD)~~ ==		== 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 ~~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.		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 40:		Line 40:

	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
			<code>break-before: right;</code> The element starts on the next right/left page.

	3. Aligning element		3. Aligning element

Youjung: /* Working Process */

2026-01-24T17:12:59Z

Working Process

← Older revision		Revision as of 19:12, 24 January 2026
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.

Youjung: /* Step 2. Design with CSS */

2026-01-22T09:23:12Z

Step 2. Design with CSS

← Older revision		Revision as of 11:23, 22 January 2026
Line 37:		Line 37:

	1. Set the page size and margin		1. Set the page size and margin

	2. Set page order using pagebreak		2. Set page order using pagebreak

	3. Aligning element		3. Aligning element

Youjung: /* Step 3. Make PDF */

2026-01-22T09:22:45Z

Step 3. Make PDF

← Older revision		Revision as of 11:22, 22 January 2026
Line 46:		Line 46:

	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]]
			pdfbook2 --paper=a4paper -n -s output.pdf

	==== Step 4. Print and bind them together ====		-s, --short-edge
			-n, --no-crop

			====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...<div style="display: flex; gap: 5px;">[[File:Test print2.jpg\|frameless]][[File:Test print.jpg\|frameless]][[File:Test print 3.jpg\|frameless]]</div>		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...<div style="display: flex; gap: 5px;">[[File:Test print2.jpg\|frameless]][[File:Test print.jpg\|frameless]][[File:Test print 3.jpg\|frameless]]</div>

	== 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]
	* Paper:		*Paper:
	* Binding:		*Binding:
	* Print method:		*Print method:

Youjung: /* Step 3. Make PDF */

2026-01-21T10:04:56Z

Step 3. Make PDF

← Older revision		Revision as of 12:04, 21 January 2026
Line 44:		Line 44:

	1. cmd/ctrl + p to download the pdf.		1. cmd/ctrl + p to download the pdf.

	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]]

Youjung: /* Working Process */

2026-01-21T10:04:17Z

Working Process

← Older revision		Revision as of 12:04, 21 January 2026
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]

	# 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.		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

	# To ~~view~~ the pdf Go Live on your code Editor. ~~And cmd+P to download the pdf~~.		2. To preview the pdf Go Live on your code Editor.
	# You can also download <code>paged.js</code> through command line~~. And output the pdf through the terminal~~.		3. You can also download <code>paged.js</code> through command line.

	$ npm install -g pagedjs-cli pagedjs		$ npm install -g pagedjs-cli pagedjs
	~~$ pagedjs-cli index.html -o result.pdf~~

	==== 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]

	# Set the page size and margin		1. Set the page size and margin
	# Set page order using pagebreak		2. Set page order using pagebreak
	# Aligning element		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'''.

	# cmd/ctrl + p to download the pdf.		1. cmd/ctrl + p to download the pdf.
	# [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]]

	==== Step 4. Print and bind them together ====		==== Step 4. Print and bind them together ====