Lesson 19.11.25

Lesson 12.11.25

Lesson 05.11.25

Lesson 29.10.25

!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/

Lesson 22.10.25

Lesson 15.10.25

Course description

In this seminar, we examine the constitution of the book under the conditions of automated processes. What design is appropriate for current knowledge production today?
Automation has shaped book design since Gutenberg: from lead typesetting, which determined font sizes and grids, to phototypesetting and desktop publishing, which opened up new freedoms but was also shaped by grid principles and software logic.
For centuries, the typographic grid determined the order of text, images, and white space—while today, digital standards such as Unicode and EPUB define which characters can be displayed and how texts are structured and distributed on platforms.
Each medium and each technology brings its own logic, structures, aesthetics (and biases). Which of these fit with our viewing habits today? Which design rules will still be relevant in the future?
In pairs, we analyze and question the visible and invisible rules, systems, and algorithms of book production and publication. In the context of current developments such as print on demand, e.g.: www.apod.li and web-to-print, e.g.: https://prepostprint.org/resources/, we explore new possibilities for algorithmic, systematic design.
Practical experiments result in books and publications that address, challenge, or outsmart the automation of book design, production, and distribution. Each group develops the “content” individually through a systematic process according to self-imposed rules on a topic of their choice.
Thus, it is not only about the efficient implementation of layouts and print templates, but we also use the formats, processes, and restrictions creatively and artistically.

Preliminary schedule

Organization

• International student support

• Guest students: Annabel, Sophie, Felix, (Meta Pub)

Introduction

The book today!

• Combination of book design and new technologies

• We shape tools and therefore our tools shape us

• Gutenberg / phototypesetting / DTP

Systematic book and layout design

• Systematic approaches have been popular in layout design since the mid-20th century, when some creative designers began to design layouts based on grids and the variation of visual characteristics of typographic elements.

• 1960s – Rule-based design: Karl Gerstner developed combinatorial layout methods and later formalized them for computers (Compendium for Literates, 1974).

• Conceptual instructions: Sol LeWitt (1971) used formal rules to design an art catalog.

• Algorithmic typography: Knuth & Plass (1981) optimized page breaks; Knuth developed Metafont (1982) and TeX (1991) for parametric, structured book production.

• Automated layouts: Muriel Cooper and MIT students experimented with computer-generated layouts (1980s–1990s).

• Interactive books: John Maeda's Reactive Book series (1990s) dynamically controlled graphics through user input.

Rule-based design

• https://workbook.conditionaldesign.org/

• http://www.generative-gestaltung.de/

• “Most of the questions for designers need systems as answers.” Erik van Blokland https://www.minsuneo.nyc/GRAPHIC-37-Introduction-to-Computation

Web-to-print

• Examples from HS courses

  Luis https://www.stiftung-buchkunst.de/foerderpreis-fuer-junge-buchgestaltung/die-praemierten/anti-environments/

  Hannah https://permacomputingasapracticefordigitalgraphicdesign.com/

• PrePostPrint Collective

• https://raphaelbastide.com/epaf/zine/

• Tools

  paged.js

  Cmd+P

  Etherport

https://expandedpublishing.net/

• Modularity, versioning, non-linearity: Texts and publications are designed in such a way that they can unfold, grow, and change

• Collaboration, participation, and peer communities are important—readers and other stakeholders are seen not only as recipients, but as part of the process