About

What does book design mean when layouts are no longer created page by page? When content updates automatically, systems make decisions, and design works through rules, structures, and algorithms? And what role does print play when web, code, and analog techniques intersect?

The project explores the tension between automated work processes and contemporary book design. Instead of traditional layout software, the focus lies on systemic thinking, fixed rules, and networked content. Automation enables new forms of production: content can be updated live, publications emerge from dynamic sources, and print often becomes a by-product of a larger, hybrid system.

Drawing on historical and current forms of automation—from lead typesetting to digital standards and web-to-print—the project examines both visible and invisible design rules. Topics such as hybrid publishing, print on demand, system design, Paged.js, open source, and AI form the basis for experimental and systematic approaches.

The resulting works highlight interfaces and symbioses between web-based design and analog techniques. Print is not replaced, but recontextualized.

The publications consciously work with processes, formats, and limitations. Automation is understood not only as a tool for efficiency, but also as a creative and artistic method to reveal, question, and rethink existing systems.

Exercise

Conventional, unconventional

Rules in book design

Please look at (individual work) contemporary and antiquarian books and distill from your findings at least three conventional and three unconventional rules from microtypography (typesetting, detail typography, orthotypography) and macrotypography (layout).

Please scan or photograph these findings and print them out in black and white on A3 paper.

Please write down the rule—as short as possible, as long as necessary— as a single line on the A3 paper below the image.

Lesson 22.10.25

Systems

Discussion of the design rules found

What rules were found?

How are the rules formulated?

-> Possible corrections

Write rules in a pad as instructions?

https://pad.riseup.net/p/book-rules-keep

Experiment: Design a layout using only this rule

Micro/macro typography

Exercise

Why noise?

Please prepare

• Laptop
• Browser (preferably Chrome)
• Visual Studio Code
• Visual Studio Code plugin: live server by Ritwick Dey

Reading

• Miekal And: Why Publish Noise? 1992 (in the appendix)

Task

• Find a simple text (.txt file, max. 2000 words)
• Formulate rules that (without implementing them in a layout) constitute a finished booklet for this text. Example: The format should be A5. The title is on page 1 and is positioned at the top left, The page number..., The text flows, the headings... etc. Be as precise as possible.
• In the workshop, we will test how your (fictitious) rules work.

Lesson 29.10.25

Web to Print 1

!disclaimer! The printing functions of browsers are often still uncared-for, buggy and imprecise, so be prepared for glitches and paradox situations.​

Post-Digital Print

Examples:

• https://www.postdigitalgraphicdesign.com/interview/0/pdgd-itw-raphaelbastide/

• https://neatnik.net/calendar/

• https://libraryoftheprintedweb.tumblr.com/

• http://p-dpa.net/

• https://onpublishing.page/

• https://hybrid.publishing.systems/

• https://unlearn.gestaltung.ai/

• https://permacomputingasapracticefordigitalgraphicdesign.com/

Frameworks:

• CMD+P

• CSS page rules: https://developer.mozilla.org/en-US/docs/Web/CSS/@page

• https://prepostprint.org/resources/

• http://osp.kitchen/tools/html2print/

• https://printcss.live/

• https://pagedjs.org/

• bindery.js https://bindery.info/

What you will need ✏️

• A laptop + internet connection

• browser (preferably Chrome)

• text editor (e.g. Visual Studio Code)

• live-server (e.g. Visual Studio Code plugin: live server by Ritwick Dey)

• Cline Extension for AI assistance

Framework used

https://pagedjs.org/

Paged.js is a free and open source JavaScript library that paginates content in the browser to create PDF output from any HTML content. This means you can design works for print (eg. books) using HTML and CSS!

Paged.js follows the Paged Media standards published by the W3C (ie the Paged Media Module, and the Generated Content for Paged Media Module). In effect Paged.js acts as a polyfill) for the CSS modules to print content using features that are not yet natively supported by browsers.

0 Creating a HTML / CSS project 📂

1. Open Visual Studio Code (VSC)

2. Create a project folder on your hard drive

3. Open that folder in VSC

4. create a new index.html and style.css

5. in the index.html use ! (Emmet) to create a basic HTML file

6. link the style.css in the head of the HTML using \

7. test by launching the server

1 Including Paged js

Let's look at the documentation: https://pagedjs.org/en/documentation/

Download the latest version of paged js:

https://unpkg.com/pagedjs@0.4.3/dist/paged.polyfill.js

+ download the interface.css stylesheet from: https://gitlab.coko.foundation/pagedjs/interface-polyfill

Put those files in you project folder and include

<script src="js/paged.polyfill.js"></script>

<link href="css/interface.css" rel="stylesheet" type="text/css" />

in the HTML head.

🙌 Great, we are ready for our first book layout

To print the pdf do the following (from the paged.js documentation):​

Click on the “Print” button of your browser. (It will most likely be in File > Print or, on your keyboard, CTRL/CMD + P)
                

2 @page 📄

The styling of pages can now be altered by using the @page rules in the css as well as @media print media queries (you might know this from responsive design: @media screen and (min-width: 900px) for instance)

General settings for the page:

@page {
                        size: A5;
                        margin-top: 10mm;
                        margin-bottom: 10mm;
                        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

                        @bottom-left {
                            content: counter(page);
                        }
                    }
                

Options for left and right page:

    @page:left {
                        margin-left: 10mm;
                        margin-right: 20mm;
                        @top-left {
                            content: "Chapter";
                        }
                    }

                    @page:right {
                        margin-left: 20mm;
                        margin-right: 10mm;

                        @top-right {
                            content: "Hybrid Publishing";
                        }
                    }
                

In the @media print query we can include all the styles that we want ONLY to appear in the print

@media print {
                        html, body {
                            height: 99vh;
                            margin: 0;
                            padding: 0;
                          }
                }
                

3 web and print at the same time 🏗

To avoid loading the print preview already on the first load we can include the following little script:

<script>
                        window.PagedConfig = {
                                auto: false
                        };       
                </script>
                

! before the script include (<script src="js/paged.polyfill.js"></script>)

and then create a button to call the preview:

<button class="noprint" onclick="preview()">print preview</button>

<script>
                //this will load paged.js and generate the PDF preview
                function preview(){
                        window.PagedPolyfill.preview();
                }
                </script>
                

with the noprint class we can hide elements in the print version in @media print

.noprint{
                        display: none;
                }
                

4 get the flow right

Paged.js breaks the HTML content into multiple pages.

With CSS properties we can control that flow.

.chapter
                {
                break-before: page;
                }
                

to break the page before every .chapterelement

5 more options … … …​

Setting bleeds:

@page    {
                    bleed: 6mm;
                }
                

Setting up crop marks:

@page {
                    marks: crop;
                }
                

Add content before:

.note::before {
                    content: "Note: ";
                }
                

counters: (e.g. for counting images)

body {
                    counter-reset: figureNumber;
                }

                figcaption {
                    counter-increment: figureNumber;
                }

                figcaption::before {
                    content: counter(figureNumber);
                }
                

generated images:

.glossary::after {
                    content: " " url("/images/glossary-icon.png");
                }
                

showing links:

a::after {
                    content: " (" attr(href) ")";
                }
                

Running title with header:

h3 {
                    string-set: title content(text);
                }

                @page {
                    @bottom-center {
                        content: string(title);
                    }
                }
                

page templates

.frontmatter {
                        page: frontmatterLayout;
                }

                @page frontmatterLayout {
                        /* specifics rules for the frontmatter*/
                }
                

select specific page

@page:nth(5){
                }
                

Creating a table of contents is a bit more tricky, but doable with some JS / CSS:

https://pagedjs.org/posts/en/build-a-table-of-contents-from-your-html/

Building an index:

https://pagedjs.org/posts/en/build-an-index-with-pagedjs/

Parallel flows:

https://pagedjs.org/posts/en/parallel-flows-within-paged.js/

Cross references:

https://pagedjs.org/en/documentation/-cross-references/

🍳 Let's cook some PDFs

Experiment with CSS styles and content ~

Many more options can be found in the reference: https://pagedjs.org/en/documentation/

Booklet Imposition

Download the imposition.js: https://gitlab.coko.foundation/pagedjs/pagedjs-plugins/booklet-imposition/-/raw/master/imposition.js?ref_type=heads\&inline=false

Include in the index.html (! after the paged.js script):

<script src="js/imposition.js"></script>

In the CSS under @page add the following:

--paged-layout: booklet;
                

Now if you click CMD+P the layout should be layouted as a booklet and ready to print!

References and Resources

• https://prepostprint.org/ – great library with examples of web2print

• https://networkcultures.org/goinghybrid/2022/10/03/relevant-tools-practices-in-hybrid-publishing/

• https://vvvvvvaria.org/logs/publishing-partyline/

• https://www.archivesites.org/2021/11/29/publishing-practices/

• http://2print.org/

• https://constraint.systems/

Reading

https://pagedjs.org/posts/en/parallel-flows-within-paged.js/

Exercise

Booklets

Make a Booklet with pajed.js

Use the Text and the Rules you formulated in the last exercise and make a booklet using only paged.js.

print & bring the finished zines