html2print

Pourquoi et comment créer des documents imprimés avec les technologies du web.

Exemples

Voir les exemples dans la section dédiée du site des ateliers Web.

Collectifs et initiatives

PrePostPrint

PrePostPrint cultive un intérêt pour les procédés de création graphique et les systèmes de publication libres considérés comme « alternatifs » ou « non conventionnels », particulièrement s'ils sont conçus avec les technologies du web. Cette initiative a pour vocation première d'interroger, partager, confronter et encourager ces pratiques naissantes et faciliter l'accès aux projets et outils existants. À L’initiative de Sarah Garcin, Raphaël Bastide et Julie Blanc.

Open Source Publishing

Open Source Publishing est un collectif de designers travaillant à Bruxelles qui ont comme particularité de ne produire leurs livres, sites web, posters, outils, etc. qu’uniquement à partir de logiciels libres ou open source. Ils sont parmi les précurseurs des approches html2print (voir la conférence de Pierre Huyghebaert et Eric Schrijver à l’ÉSA Pyrénées en 2012).

L’Atelier des chercheurs

L’Atelier des chercheurs est un collectif de designers engagés depuis 2013 dans la création d’outils libres et modulaires pour transformer les manières d'apprendre et de travailler. Il est aujourd’huicomposé de Sarah Garcin, Pauline Gourlet et Louis Eveillard.

Mais ausi

Le collectif bruxellois Luuse. Le collectif Bonjour monde (recherche des procédés alternatifs dans le champ de la création graphique). Le Groupe CCC, fondé par Alice Gavin et Valentin Bigel. Le studio Figures libres. Le site d’Antoine Fauchié, doctorant à l’Université de Montréal (recherche et articles sur les écritures et les livres numériques). Loraine Furter, édition hybride (publications papier et numériques), recherche en design graphique les projets féministes intersectionnels. La Villa Hermosa est un autre atelier de design graphique bruxellois.

Outils

Projets

Techniques

Intégrer une feuille de style dont les règles ne seront appliquées qu’à l’impression

<link media="print" href="print.css">

Déterminer une taille de page

@page {
  size: A4 landscape;
}
/* ou pour une affiche */
@page {
  size: A3 portrait;
}

On peut cibler des pages spécifiques avec les sélecteurs :left et :right. La première page peut être ciblée avec :first, les pages vierges avec :blank :

@page :first {
    margin-top: 4cm;
}
@page :left {
    margin-right: 8cm;
}

@page :right {
    margin-left: 8cm;
}

Pour mieux maîtriser la pagination du flux du contenu, il faut utiliser les règles break-* et page-break-*:

h2 {
    /* toujours provoquer un saut de page avant l'élément h2 */
    break-before: page; /* ou */
    page-break-before: always;
}
h2, h3 {
    /* éviter qu'un paragraphe ne se détache du titre qui le précède immédiatement. */
    break-after: avoid-page; /* ou */
    page-break-after: avoid;
}
figure {
    /* pour éviter qu’un élément soit coupé et affiché sur deux pages */
    break-inside: avoid; /* ou */
    page-break-inside: avoid;  
}

Veuves et orphelines

p {
    /* minimume deux lignes présentes sur la page, au début ou à la fin d’un paragraphe */
    orphans: 2;
    widows: 2;
}

Contours continus

section {
    /* pour que le contour de la section soit complet sur chaque page */
    border: 0.5pt solid;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

Tester

Sur Firefox, ouvrir les outils de développement et saisir media emulate print Sur Chrome, ouvrir les outils de développement et sélectionner “More Tools” puis “Rendering”.

[ à suivre… ]

Pourquoi ?

« Les technologies du web offrent un environnement de publication ouvert et décentralisé. Les documents web sont ainsi éditables en différents endroits et temporalités par une variété de personnes et d'outils, rompant avec la logique linéaire de l'ère Gutenberg. ¶ Dans cet espace, la notion de flux est centrale: le flux des données, allant de la conversion de documents "bruts" vers la production de multiples formats; le flux des formes produites, conditionné par la struture du HTML et la logique de «cascade» des feuilles de style; ou encore le flux des personnes et les nouveaux moyens de collaboration qui leurs sont offerts par le net. ¶ Si cet espace offre de nouvelles possibilités, cela ne va pas sans poser de questions. Comment penser un design alors sans le subordonner au contenu? Comment publier sur différents formats sans nier la spécificité des différents supports? Comment tester et combiner différentes pistes de mise en page? Comment se partager les taches tout en permettant à tous d'avoir une vue d'ensemble sur l'objet produit ? » — OLA

Adobe

Si des alternatives libres (Gimp, Inkscape, Scribus) ou commerciales (Affinity) existent ou émergent, Adobe a établi une puissante hégémonie sur l’écosystème logiciel de la création graphique. Ce qui n’est pas sans poser quelques problèmes:

4 libertés du logiciel libre (Richard Stallman)