forked from momijizukamori/bookbinder-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
350 lines (320 loc) · 25.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
<!DOCTYPE html>
<html>
<head>
<title>Bookbinder</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css">
<link rel="stylesheet" type="text/css" href="./styles.css">
<script type="text/javascript" src="./preload.js"></script>
</head>
<body>
<div class="wrapper">
<div class="section" id="intro">
<h1>Bookbinder JS</h1>
A Javascript-based app for formatting PDFs for bookbinding. For more information, feature requests, or to
contribute, view the project's <a href="https://github.com/momijizukamori/bookbinder-js">Github repository</a>.
If you have issues with this version, you can try the <a href="old/">old version</a> instead, which only supports folio layouts.
<center style="font-family:monospace;
padding-top: 0.75em;font-variant-caps: small-caps;">current version: 1.0.0</center>
</div>
<form id="bookbinder" name="bookbinder">
<div class="section" id="input">
<h2>File Info</h2>
<span class="row"><label>Input File: <input type="file" name="input_file" accept=".pdf"
id="input_file"></label></span>
<!-- <span class="row"><label>Page Size: <span id="page_size"></span></span> -->
<span class="row">Number of Pages: <span id="page_count"></span></span>
<!-- <span class="row">Page Ratio: <span id="input_ratio"></span></span> -->
<span class="row" style="padding: 10px;font-style: italic;">While some PDF viewers may display the first two pages as a spread, be aware that the first page, which is odd, will be on the right when printed. The first printed spread are pages 2 & 3 of your PDF document. Evens always on the left, odds always on the right.</span>
</div>
<div class="section" id="input">
<h2>Source Manipulation</h2>
<span class="row"><input type="radio" id="none" name="source_rotation" value="none" checked>
<label for="none">no modification</label>
<details style="padding-left:40px;"><summary> Details</summary><IMG SRC="img/noRotationDiagram.png" width="100px"/></details>
</span>
<span class="row"><input type="radio" id="90cw" name="source_rotation" value="90cw">
<label for="90cw">rotate all pages 90° clockwise</label>
<details style="padding-left:40px;"><summary> Details</summary><IMG SRC="img/90cwDiagram.png" width="100px"/></details>
</span>
<span class="row"><input type="radio" id="90ccw" name="source_rotation" value="90ccw">
<label for="90ccw">rotate all pages 90° counter clockwise (anti clockwise)</label>
<details style="padding-left:40px;"><summary> Details</summary><IMG SRC="img/90ccwDiagram.png" width="100px"/></details>
</span>
<span class="row"><input type="radio" id="out_binding" name="source_rotation" value="out_binding">
<label for="out_binding">Out binding </label>
<details style="padding-left:40px;">
<summary> Details</summary>
For books with the bound edge at the bottom of the page -- rotate all odd pages 90° clockwise, all even pages 90° anti-clockwise
<BR/>
<IMG SRC="img/bottomBindingDiagram.png" width="100px"/>
</details>
</span>
<span class="row"><input type="radio" id="in_binding" name="source_rotation" value="in_binding">
<label for="in_binding">In Binding</label>
<details style="padding-left:40px;">
<summary> Details</summary>
For books with the bound edge at the top of the page -- rotate all odd pages 90° anti-clockwise, all even pages 90° clockwise <BR>
<IMG SRC="img/topBindingDiagram.png" width="100px">
</details>
</span>
</div>
<!-- <div class="section" id="units">
<h2>Units</h2>
<span class="row"><input type="radio" id="inch" name="units" value="inch">
<label for="inch">Inches</label></span>
<span class="row"><input type="radio" id="mm" name="units" value="mm" checked>
<label for="mm">Millimeters</label></span>
<span class="row"><input type="radio" id="pt" name="units" value="pt">
<label for="pt">Points</label></span>
</div> -->
<div class="section" id="printer_info">
<h2>Printer</h2>
<span class="row"><label for="paper_size">Paper size</label>
<select name="paper_size" id="paper_size">
</select></span>
<span class="row" style="padding-left: 20pt;font-style: italic;">
<label for="paper_size_unit">display unit for paper selection </label>
<select name="paper_size_unit" id="paper_size_unit">
<option label="Points" value="pt"/>
<option label="Inches" value="in"/>
<option label="Centimeters" value="cm"/>
</select>
</span>
<span class="row" style="padding-left: 20pt;font-style: italic;">
<label for="paper_size_unit">dimensions for CUSTOM: </label>
<input type="number" id="paper_size_custom_width" name="paper_size_custom_width" style="width:4em;"> x
<input type="number" id="paper_size_custom_height" name="paper_size_custom_height" style="width:4em;"> (in Points) <span data-balloon-length="medium" aria-label="The CUSTOM option in drop down will only appear if valid dimensions are provided. Points are the unit the system/code works in. Luckily Google can help you convert cm or inches into Points quite easily!" data-balloon-pos="up">ℹ️</span>
</span>
<span class="row"><label for="printer_type">Printer type</label>
<select name="printer_type" id="printer_type">
<option value="single" selected>Single-Sided</option>
<option value="duplex">Duplex</option>
</select>
<span data-balloon-length="medium" aria-label="Duplex will alternate front and backs of sheets in a single file; Single-sided will split fronts and backs into seperate files." data-balloon-pos="up">ℹ️</span>
</span>
<span class="row">
<label for="paper_rotation_90">Rotate Paper 90° <input type="checkbox" name="paper_rotation_90" id="paper_rotation_90"></label>
<span data-balloon-length="medium" aria-label="This puts your paper in 'landscape' -- layout still happens the same, but the porportions of things will be different" data-balloon-pos="up">ℹ️</span>
</span>
<span class="row"> <label>Alternate Page Rotation (AKA Flip on Long Side)<input type="checkbox" name="rotate_page"></label> <span id="folio_warning"><b>NOTE:</b> Not currently working for folios, sorry! Use the <a href="old/">old version</a> for now.</a></span></span>
</div>
<div class="section" id="book_size">
<h2>Page Layout</h2>
<span class="row"><input type="radio" id="folio" name="pagelayout" value="folio" checked>
<label for="folio">Folio (two pages per side of sheet)</label></span>
<span class="row"><input type="radio" id="quarto" name="pagelayout" value="quarto">
<label for="quarto">Quarto (four pages per side of sheet)</label></span>
<span class="row"><input type="radio" id="octavo" name="pagelayout" value="octavo">
<label for="octavo">Octavo (eight pages per side of sheet)</label></span>
<span class="row"><input type="radio" id="sextodecimo" name="pagelayout" value="sextodecimo">
<label for="sextodecimo">Sextodecimo (sixteen pages per side of sheet)</label></span>
<span class="row"> <label>Add Foldlines <input type="checkbox" name="cropmarks"></label>
<span data-balloon-length="medium" aria-label="Adds folding guidelines (ordered from thickest to thinnest)" data-balloon-pos="up">ℹ️</span>
</span>
<span class="row"> <label>Add Cutlines <input type="checkbox" name="cutmarks"></label>
<span data-balloon-length="medium" aria-label="Adds cutting guidelines" data-balloon-pos="up">ℹ️</span>
</span>
<span class="row">
<details>
<summary>Folding instructions for quarto/octavo</summary>
<p>
Folding these two layouts is slightly more complex than the simple single-fold folio.
Both of these have been designed so that the first fold is parallel to the short edge of the paper - eg, if you hold the page in portrait orientation, you will be folding the top edge to the bottom.
One side of the page will have consecutive numbers across this fold (ie, 3 and 30 on the top row, 2 and 31). Fold inward across this line (so that 3 has been folded to lay against 2, and 30 against 31).
The next fold is along the other paper axis (parallel to the original long edge). For quarto, you want to find the side with the numbers closest together, and fold inwards to match them (this will be consecutive on the innermost sheet).
For octavo, look at the bottom-most row and find the consecutive pair, then fold inward. Octavo has one last fold, for which you want to find the pair remaning that are closest, and fold them together.
</p><p>
Or, if you want to just memorize the order, once you find the first fold side, the order is:<br>
<b>quarto</b> - top to bottom, fold points away from you, left to right, fold points towards you.<br>
<b>octavo</b> - top to bottom, fold points away from you, left to right, fold points away from you, top to bottom, fold points towards you.
</p>
</details></span>
<span class="row"> <label for="page_scaling">Page scaling</label>
<select name="page_scaling" id="page_scaling">
<option value="centered">Original</option>
<option value="lockratio" selected>Keep proportional</option>
<option value="stretch">Stretch to fit</option>
</select>
</span>
<span class="row"> <label for="page_positioning">Page Positioning</label>
<select name="page_positioning" id="page_positioning">
<option value="centered" selected>Centered</option>
<option value="binding_alinged">Snug against binding edge</option>
</select>
</span>
<span class="row"> <label for="center_margins">Margins</label>
<select name="center_margins" id="center_margins" disabled>
<option value="spine" selected>Preserve spine fold margin</option>
<option value="center">Center</option>
</select>
<span data-balloon-length="medium" aria-label="If you have designed your input pdf with the intention of trimming printed pages down, you may wish to preserve the spine margin." data-balloon-pos="up">ℹ️</span>
</span>
<span class="row">
White Space Manipulation. All values are in points, relative to original document. 1 point = 1/72 inch<BR>
Fore-Edge Margin: <input type="number" id="main_fore_edge_padding_pt" name="main_fore_edge_padding_pt" style="width: 5em;margin-left: 15px;"> pt<BR>
Binding Margin: <input type="number" id="binding_edge_padding_pt" name="binding_edge_padding_pt" style="width: 5em;margin-left: 15px;"> pt<BR>
Top Margin: <input type="number" id="top_edge_padding_pt" name="top_edge_padding_pt" style="width: 5em;margin-left: 15px;"> pt<BR>
Bottom Margin: <input type="number" id="bottom_edge_padding_pt" name="bottom_edge_padding_pt" style="width: 5em;margin-left: 15px;"> pt<BR>
</span>
<span class="row"><label for="print_file">Downloaded File(s)</label>
<select name="print_file" id="print_file">
<option value="aggregated">Aggregated File Only</option>
<option value="both" selected>Both aggregated & per signature files</option>
<option value="signatures">Signature Files Only</option>
</select>
</span>
</div>
<div class="section" id="flyleaf_info">
<h2>Flyleaf</h2>
<span class="row"> <label>Add flyleaf <input type="checkbox" name="flyleaf"></label>
<span data-balloon-length="medium" aria-label="An extra blank page at the start and end of the book" data-balloon-pos="up">ℹ️</span>
</span>
</div>
<div class="section" id="sig_format">
<h2>Signature Format</h2>
<!-- <span class="row"><label>Default signature length: </label><input type="text" placeholder="8" name="sig_length"></label></span> -->
<!-- <span class="row"> <input type="radio" id="booklet" name="sig_format" value="booklet">
<label for="booklet">Booklet</label></span> -->
<span class="row"> <input type="radio" id="perfect" name="sig_format" value="perfect">
<label for="perfect">Perfectbound</label></span>
<span class="row"> <input type="radio" id="standardsig" name="sig_format" value="standardsig" checked>
<label for="standardsig">Standard signatures</label> - length </label><input type="number" value="8"
name="sig_length"></label>
<span data-balloon-length="medium" aria-label="Number of sheets per signature" data-balloon-pos="up">ℹ️</span></span>
<span class="row"> <input type="radio" id="customsig" name="sig_format" value="customsig">
<label for="customsig">Custom signatures</label> <input type="text" name="custom_sig">
<span data-balloon-length="medium" aria-label="Specify as a set of numbers seperated by commas, such as: 10, 10, 8" data-balloon-pos="up">ℹ️</span>
<span class="row">
<details>
<summary>A note on calculating signature lengths</summary>
<p>
In this code, the length of a signature is the number of full-sized sheets of paper per signature. For a folio book, this means that the number of folds you punch through when sewing together a signature is the same as the number of sheets in the signature, as each sheet has one fold. For quarto, this will be two folds for each sheet - octavo, four; sextodecimo, eight. Calculate your signature lengths accordingly (in particular, you almost certainly don't want more than one sheet for sextodecimo).
</p>
</details></span>
<h3>Wacky Small Layouts</h3>
<span class="row" style="margin-bottom:15px;"><i>These layouts contain one or more signature per printed page. They use only the "File Info" and "Printer" settings. The names are arbitrary and hold no standardized meaning.</i></span>
<span class="row" style="text-align: left; float:left;">Fore-Edge Padding: <br><input type="number" id="fore_edge_padding_pt" name="fore_edge_padding_pt" style="width: 5em;margin-left: 15px;"> pt</span>
<span class="row" style="text-align: right; float:right;" id="wacky_spacing">
<input type="radio" id="wacky_pack" name="wacky_spacing" value="wacky_pack" checked>
<label for="wacky_pack">Packed page layout</label>
<br>
<input type="radio" id="wacky_gap" name="wacky_spacing" value="wacky_gap">
<label for="wacky_gap">Distributed space page layout</label>
</span>
<span class="row" style="clear:both;padding-top: 15px;"> <input type="radio" id="1_3rd" name="sig_format" value="1_3rd">
<label for="1_3rd">6 per side <sub>(3 folio signature)</sub></label>
</span>
<span class="row instruction-indent">
<details>
<summary>Instructions</summary>
<p>
Cut along the lines <i>or</i> cut just extra bit off the top (along exposed "top" of page) and then fold up along the dotted lines (if trimming, you can just trim off the cruft at the bottom-- tops need to be even for leveling purposes however). Outer margins intentionally under-marked so you can trim wherever feels right after folding & assembly.
</p>
<p>
Not the most paper efficient of layouts, but it's optimized for organization (if a signature is just one page, harder to botch the ordering) and many, smaller signatures make for rounder backs and large swell in my [six's] opinion (which helps w/ nice shoulders, if you're into that sort of thing)
</p>
</details>
</span>
<span class="row"> <input type="radio" id="A7_2_16s" name="sig_format" value="A7_2_16s">
<label for="A7_2_16s">Petite - 16 per side <sub>(4 folio signature x 2)</sub></label>
</span>
<span class="row instruction-indent">
<details>
<summary>Instructions</summary>
<p>
<center><img src="img/2_sig_4x4_diagram.png" style='height: 100%; width: 100%; object-fit: contain'></center>
Cut the vertical center line. You can also cut the horizontal lines if you like, or just fold it up as detailed above.
</p>
</details>
</span>
<span class="row"> <input type="radio" id="8_zine" name="sig_format" value="8_zine">
<label for="8_zine">Single Sheet Zine - 8 per side <sub>(one sided printed page foldup)</sub></label>
</span>
<span class="row instruction-indent">
<details>
<summary>Instructions</summary>
<p>
The classic no-cut, single page zine! Just fold it up right and you've got yourself a mutant non-standard folio making an 8 page little fellow-- all extra pages beyond 8 are discarded. For better folding instructions than I could possibly write, see: <a href="https://www.quarantinepubliclibrary.com/tutorial">https://www.quarantinepubliclibrary.com/tutorial</a>
</p>
</details>
</span>
<span class="row"> <input type="radio" id="a_3_6s" name="sig_format" value="a_3_6s">
<label for="a_3_6s">Small - 18 per side <sub>(3 folio signature per row x 3)</sub></label>
</span>
<span class="row instruction-indent">
<details>
<summary>Instructions</summary>
<p>
<b> THIS IS A LANDSCAPE LAYOUT. IT MUST BE PRINTED AND "flipped on the short side" (the non-typical flipping)</b>
<br>
Remember to do a single-sheet test print if it's your first time to make sure duplex/mirroring is correct!
</p><p>
Cut out the rows. Fold up the folios like a zig-zag (two per face). Then fold the center of the text (smoosh the two matching page numbers together).
</p><p>
Note that when folding, it's important for the <b>center of the folios to line up</b>. That's what I measure against (less so fretting about folding exactly at the edge). Remember! Printer skew is a real thing!
</p>
</details>
</span>
<span class="row"> <input type="radio" id="a9_3_3_4" name="sig_format" value="a9_3_3_4">
<label for="a9_3_3_4">Little - 20 per side <sub>(3 folio / 3 folio / 4 folio signatures)</sub></label>
</span>
<span class="row instruction-indent">
<details>
<summary>Instructions</summary>
<p>
<center><img src="img/3_3_4_diagram.png" style='height: 100%; width: 100%; object-fit: contain'></center>
Cut along the cut lines. Fold up the 3 folio signatures, then the 4 folio.
</p>
</details></span>
<span class="row"> <input type="radio" id="a_4_8s" name="sig_format" value="a_4_8s">
<label for="a_4_8s">Tiny - 32 per side <sub>(4 folio signature per row x 4)</sub></label>
</span>
<span class="row instruction-indent">
<details>
<summary>Instructions</summary>
<p>
<b> THIS IS A LANDSCAPE LAYOUT. IT MUST BE PRINTED AND "flipped on the short side" (the non-typical flipping)</b>
<br>
Remember to do a single-sheet test print if it's your first time to make sure duplex/mirroring is correct!
</p><p>
Cut out the rows. Fold up the folios like a zig-zag (two per face). Then fold the center of the text (smoosh the two matching page numbers together).
</p><p>
Note that when folding, it's important for the <b>center of the folios to line up</b>. That's what I measure against (less so fretting about folding exactly at the edge). Remember! Printer skew is a real thing!
</p>
</details>
</span>
<span class="row"> <input type="radio" id="a10_6_10s" name="sig_format" value="a10_6_10s">
<label for="a10_6_10s">Mini - 60 per side <sub>(2 folio / 3 folio signatures per row x 6)</sub></label></span>
<span class="row instruction-indent">
<details>
<summary>Instructions</summary>
<p>
<b> THIS IS A LANDSCAPE LAYOUT. IT MUST BE PRINTED AND "flipped on the short side" (the non-typical flipping)</b>
<br>
Thankfully most small layouts fit on one page-- easy enough to do a test print and make sure you're duplexing correctly (if that's your route)
</p><p>
<center><img src="img/6_10s_diagram.png" style='height: 100%; width: 100%; object-fit: contain'></center>
Cut out the rows. Fold up the folios like a big zig-zag (two per face). Then fold the first 2 folios into a signature and the last 3 folios into a signature. I often cut them apart only when I'm stitching things together.
</p><p>
Note that when folding, it's important for the <b>center of the folios to line up</b>. That's what I measure against (less so fretting about folding exactly at the edge). Remember! Printer skew is a real thing!
</p>
</details></span>
</div>
<div class="section" id="sig_info">
<h2>Signature Info</h2>
<button type="button" name="preview" id="preview" disabled>Preview Output</button>
<span data-balloon-length="medium" aria-label="Will not show previews if 'Signature Files Only' is selected. Only shows one side for 'Single Sided' printing. Not tested on all browsers (or any browsers other than Chrome really...)" data-balloon-pos="up">ℹ️</span>
<center>
<iframe id="pdf" style="width: 100%; height: 10px;display:none;"></iframe>
</center>
<span class="row">Total Pages: <span id="total_pages"></span></span>
<span class="row">Total Sheets: <span id="total_sheets"></span></span>
<span class="row">Number of Signatures: <span id="sig_count"></span></span>
<span class="row">Signature Arrangement: <span id="sig_arrange"></span></span>
</div>
<button type="button" name="generate" id="generate" disabled>Generate Output</button>
</form>
</div>
</body>
</html>