Zine Press

Write in half pages, print in folded sheets.

A zine is a stack of paper folded once and stapled on the fold. That means the page you read and the page you print are different objects: reading page one is the right-hand half of the front of the outermost sheet, and its neighbour on that sheet is the last page of the zine. This is an editor for the first thing and a press for the second, and it does the shuffling in between so you never have to think about it.

No backend, no build step, no accounts. It is a folder of files you can open.

Run it locally

python3 serve.py

Then open http://localhost:4174/.

serve.py is python3 -m http.server with one addition: it tells the browser not to cache. Without that, an edited .js file keeps being served out of the browser cache and you debug code that is no longer running.

The three views

Write is a continuous column exactly as wide as a half page's text block. The text runs on from one page to the next and dashed seams mark where each page ends, so you can see the shape of the pages without losing the thread of the writing. The rail on the left holds the sections; the rail on the right holds every setting that decides where a line falls.

Arrange lays out every page in reading order, small enough to see the whole zine at once. Drag a section in the left rail and the text reflows into its new position, page numbers and all.

Print shows the sheets as they will come out of the printer — two half pages side by side, front and back — and writes the PDF.

Sections, not pages

Text that reflows and pages you can drag are contradictory: the moment you add a sentence, every later page break moves, so a page is not a thing that can hold a fixed position. So the draggable unit here is the section — a heading and the writing under it. Sections reorder; pages fall where the text puts them.

Ticking New page on a section makes it start at the top of a fresh page. The unused rest of the previous page is shown in the editor as real empty space rather than closed up, because that space is going to be printed.

⌘↵ drops a page break anywhere else you want one.

Typing markdown

You can type markdown at it and get the thing itself. The markup never survives — it is swapped for real formatting the moment you finish it, and nothing is stored as markdown.

Type	Get
# ## ###	headings one to three
- * +	a bulleted list
1.	a numbered list
>	a quotation
--- then return	a rule
**bold**	bold
*italic* or _italic_	italic

Emphasis only fires when both delimiters sit against a non-space, which is what keeps 2 * 3 * 4 and foo_bar_ as themselves. Inside a list item or a caption the block prefixes are left alone too: nobody types ## into a bullet hoping for a heading.

These are input rules rather than a parser. Text arriving all at once — a paste, or a whole line from dictation — carries no trigger, which is right: reading markdown wholesale is the importer's job, not something that should happen while you are looking away.

The imposition

For a 28-page zine the sheets are:

28 |  1        2 | 27
26 |  3        4 | 25
24 |  5        6 | 23
22 |  7        8 | 21
20 |  9       10 | 19
18 | 11       12 | 17
16 | 13       14 | 15

Seven sheets, each carrying four half pages. The two pages facing each other across any fold always add up to one more than the page count, which is the property js/imposition.js checks itself against.

Page counts are rounded up to a multiple of four; the blanks go at the end.

Inside and outside margins are not left and right. The inside margin is the one at the fold, and it swaps sides from page to page — so it is worth giving it a little more than the outside, or the text creeps into the crease.

Two orders

The same zine can come out of Print two ways, and the choice is in the export panel.

Print order is the folded booklet: two half pages to a sheet, sheets in the order the printer needs them, blanks added at the end to round the count up to a multiple of four.

Reading order is one page at a time, in the order a reader meets them, on a page the size of a single half — for sending round or reading on a screen. The press marks are left off and the blanks are not written at all, since they only exist to fill out a sheet. The inside and outside margins still alternate, because that is how the document is set and a proof that quietly centred them would not be showing you your zine.

Both writes one of each into a zip. Two PDFs would be two downloads, and a browser will only reliably grant one.

Printing and folding

Print at 100% — no "fit to page", which would shrink the sheet and put your margins somewhere else. Print double-sided. Fold the whole stack in half together, then staple twice on the fold.

If the second side comes out upside down relative to the first, that is your printer's duplex flip and not the file: turn on Rotate back sides 180° in the Print panel and export again.

How the PDF is made

The PDF is not a second attempt at laying out the document. There is exactly one laid-out copy of the text — the editor's own column — and everything else is that column plus a list of page offsets. The exporter walks the live DOM, asks the browser where every word actually ended up, and writes those positions down. Page previews are the same column seen through a smaller hole. Nothing lays the text out twice, so nothing can disagree.

Two consequences worth knowing about:

Kerning is off, deliberately. A PDF advances glyphs by the widths in the embedded font's width table, and a pair kern has nowhere to live in that table. Left on in the browser, every line would set a fraction narrower on screen than on paper — half a pixel a word, a couple of pixels a line — and the preview would stop being the truth. Ligatures stay on: a ligature is a single glyph with a single advance, so both sides already agree about it.

Fonts are static, not variable. Every face in fonts/ was instanced from its variable original to a fixed weight. The browser is happy to interpolate a weight along an axis, but the PDF embeds a file, and an embedded variable font arrives at its default instance — bold would have come out regular with nothing to indicate it.

Words are placed one at a time, then joined back into lines wherever the embedded font's own metrics agree with the browser to within a third of a point. That is what makes the text in the PDF selectable a line at a time instead of a word at a time, and it is why justified text — where every space is a different width — quietly falls back to per-word placement and still comes out exact.

Type

Five families, all open licence, subset to Latin and embedded subset again into the PDF:

Family	For
EB Garamond	old-style serif, small and quiet — the default body
Libre Baskerville	sturdier serif, large on the body, reads well small
Inter	neutral sans, for captions and page numbers
Space Grotesk	geometric display sans, for headings
Courier Prime	typewriter monospace, for the photocopied look

Licences are in fonts/.

Where your zine lives

In this browser. The text and every setting go to localStorage shortly after you stop typing; pictures go to IndexedDB, because a few photographs would blow the localStorage budget on their own and losing the writing to save a picture is the wrong trade.

That means clearing site data takes the lot. Save a copy, under Document in the settings rail, writes the whole zine — pictures included — to a single .json file you can keep somewhere else or open on another machine.

Files

File	Holds
js/doc.js	the document, its settings, storage, and the picture store
js/flow.js	the one stylesheet that decides where a line falls
js/paginate.js	measuring real line boxes and choosing the breaks
js/imposition.js	which pages share a sheet, and which margin is the fold
js/editor.js	the writing surface: sections, commands, paste, pictures
js/markdown-input.js	swapping markdown for formatting as you type it
js/preview.js	page and sheet previews, and the seams over the editor
js/extract.js	reading positions and metrics back out of laid-out DOM
js/pdf.js	writing the sheets, via a vendored pdf-lib
js/zip.js	a stored-method zip, for when you want both orders at once
js/settings-ui.js	the settings rail, built from a description
js/app.js	wiring
serve.py	dev server that refuses to let the browser cache