forked from momijizukamori/bookbinder-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
252 lines (231 loc) · 18.2 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
<!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.
</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="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"><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>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="lockratio" selected>Keep proportional</option>
<option value="stretch">Stretch to fit</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>
</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="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 size" (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 size" (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 size" (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>
<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>