Cooking is coding / Coding is cooking

Workshop ESAC Cambrai 24-26 octobre 2022

Web2Print

CSS Print

La principale méthode pour créer des PDFs imprimables avec des technologies du web consiste à utiliser la fonctionnalité imprimer du navigateur, de préférence sur Chromium ou Chrome.

Le CSS permet de créer des feuilles de style spécifiques à l'écran et à l'impression. Grâce à cette fonctionnalité appelé media print, il est possible d'avoir un design différent entre le rendu écran et le rendu print, et même un contenu différent.

Fonctionnement du css print

@media print {
    	Votre CSS spécifique pour le print ici 
    }

Définir le format de la page

@media print {
    	@page{size: A4;}
    /* ou */
    	@page{size: 21cm 29.7cm;}
    }

Définir les marges 

/* Définir les marges */       
    @page { margin: 2cm }

    /* Définir les marges de la page de gauche */
    @page :left { margin: 1cm; }

    /* Définir les marges de la page de droite */
    @page :right { margin: 1cm; }

    /* Définir les marges sur la première page, il est aussi possible de sélectionner une page en particulier */
    @page :first {margin: 1cm 2cm;}

Attention, si vous voulez imprimer avec un fond de couleur, les marges seront blanches.

Sauts de page

Les 3 propriétés CSS page-break-before, page-break-after, et page-break-inside permettent de définir à quel endroit faire des sauts de page ou non.

  • page-break-before permet de gérer un saut de page avant un élément HTML.
  • page-break-after permet de gérer un saut de page après un élément HTML.
  • page-break-inside empêche un élément HTML de se couper en deux sur deux pages (comme les images par exemple) 
/* Ces propriétés prennent comme valeur: */
    page-break-after  : auto | always | avoid 
    page-break-before : auto | always | avoid 
    page-break-inside : auto | avoid

auto est la valeur standard, always ajoute un saut de page à chaque fois, avoid empêche un saut de page.
Par exemple:

h1, h2, h3, h4, h5, h6 { 
    	page-break-after:avoid; 
    }

    img { 
    	page-break-inside:avoid; 
    }

Avoir des contenus différents en le web et le print

Il est possible de cacher certains éléments sur le web et de les afficher sur la version print et vice-versa

@media screen{
    	h1{display:none;}
    }
    @media print{
    	img{display:none}
    }

Micro Typo

Explication des différents espaces unicode

Quelques exemples:

Exemple de contenus différents entre web et print :
Aperçu — Télécharger le code

Exemple de styles différents entre web et print :
Aperçu — Télécharger le code

Exemple d'interface de prévisualisation :
Aperçu — Télécharger le code

Paged.js

La librairie open-source javascript Paged.js permet d'aller un peu plus loin et offre un outil complet qui pagine le contenu dans le navigateur pour créer une sortie PDF à partir de n'importe quel contenu HTML. Elle permet un aperçu précis du rendu et propose des fonctionnalités étendues.

Télécharger le starter kit Paged.js

Pour que Paged.js fonctionne correctement, il faut l'ouvrir en local avec un serveur PHP (Mamp par exemple)

Paged.js utilise les fonctionnalités du print css (voir ci-dessus). La librairie propose égalément des fonctionnalités supplémentaires.

Sauts de page

La propriété break-before indique qu'un élément doit commencer sur une nouvelle page

  • break-before: page : l'élément commence sur la page d'après
  • break-before: right ou break-before: left : l'élément commence sur la prochaine page de droite ou la prochaine page de gauche. Le programme crée automatiquement une page blanche si besoin 
h2 { 
        break-before: right;
      }

Vous pouvez aussi utiliser la propriété break-after de la même manière, le saut de page se fera après l'élément ciblé.

Ajouter des numéros de page

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

Créer du contenu dans les marges

Il est possible de créer du contenu de type titre courant ou numéro de page ou autre dans les marges de la page. Exemple, ajouter un titre courant en haut à droite de la page

@page {
        @top-right {
          content: "Un titre :)";
        }
      }

Liste des marges

@top-left-corner {}
      @top-left {}
      @top-center {}
      @top-right {}
      @top-right-corner {}
      @left-top {}
      @left-middle {}
      @left-bottom {}
      @right-top {}
      @right-middle {}
      @right-bottom {}
      @bottom-left-corner {}
      @bottom-left {}
      @bottom-center {}
      @bottom-right {}
      @bottom-right-corner {}

Nommer une page (pour lui donner un style spécifique)

.mapage {
        page: mapage;
      }

      @page mapage {
        /* ici les propriétés personnalisées de ma page*/
      }

Associer p5.js et Paged.js

Aperçu — Télécharger le code

Créer/Modifier une image avec HTML/CSS/JS

Image en bichromie

<div class="parent">
          <div class="image duotone"></div>
        </div>
.image{
         width: 100%;
         height:350px;
         background: url('images/08.jpg') center center no-repeat;
         background-size: 100%;
         position: relative;
      }

      .duotone::after{
         content: '';
         width:100%;
         height:100%;
         position: absolute;
         top:0;
         left: 0;
         background-color: blue;
         mix-blend-mode: lighten;
      }

      .duotone::before{
         content: '';
         width:100%;
         height:100%;
         position: absolute;
         top:0;
         left: 0;
         background-color: red;
         mix-blend-mode: multiply;
      }

ASCII

Voir l'exemple sur https://medialab.sciencespo.fr/, ainsi que les explications sur https://julie-blanc.fr/blog/2020-03-27_medialab-2/

Chaque ligne de l'image est une balise <pre>, avec un simple style css:

pre {
        font-family: monospace;
        line-height: 0.1;
        font-size: 9px;
      }

Exemples divers

Créer/Modifier un texte avec HTML/CSS/JS

Dégradé sur un texte

.gradient {
        background: -webkit-linear-gradient(blue, red);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

Dégradé de folie

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel dui a massa dignissim pharetra. Praesent porta dolor quis orci tristique sodales. Etiam consectetur, neque in elementum dignissim, felis nibh malesuada dolor, at venenatis nisl dolor at felis. Morbi at nulla elit. Aenean non congue est, vitae venenatis lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut tristique facilisis mollis. Integer lacus eros, lacinia in molestie a, placerat nec nisi. Aenean iaculis et nibh quis hendrerit. Aenean quis nisl ultrices, pretium velit ut, posuere justo. Nam faucibus pretium est, a lobortis nisi vestibulum at.

Superposition texte/image

Aubergine Pizza !

<div class="superposition-exemple">
  <figure class="superposition-image">
    <img src="images/08.jpg">
  </figure>
  <p class="superposition-texte">Aubergine Pizza !</p>
</div>
.superposition-exemple{
  position: relative;
  background: red;
}

.superposition-image{ 
  mix-blend-mode:screen;
}

.superposition-texte{
  position: absolute; 
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -100%) skew(-10deg, -10deg);
  z-index: 500;
  font-size: 80px;
  font-weight: bold;
  text-align: center;
  color: white;
  line-height: 1.1;
  mix-blend-mode: exclusion;
  text-transform: uppercase;
}

Exemples divers