Paged.js et CSS Page Weaver

Introduction

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.

Outils nécessaires

  • Paged.js
  • MAMP : MAMP est une application qui permet de créer un serveur local sans avoir besoin de les charger sur un serveur distant. Paged.js nécessite un serveur local pour fonctionner.

CSS Page Weaver

Pour plus de simplicité, nous allons utiliser un génial et bien utile boilerplate développer par Julie Blanc et Benjamin G. CSS Page Weaver est outil léger et extensible, basé sur Paged.js, pour concevoir des publications dans le navigateur. Ce boilerplate est parfait pour se familiariser rapidement avec les composants de Paged.js sans avoir à se battre avec l'installation.

Installation

  • Télécharger le boilerplate augmenté
  • Dézipper-le, placer-le dans le dossier de votre choix et renommer-le.
  • Dans MAMP, Preferences > Server > Document Root, choisissez votre dossier de travail
  • Démarrer votre serveur MAMP en cliquant sur Start
  • Ouvrir Chromium/Chrome et aller à l'adresse http://localhost:8888/
  • Vous devriez voir un document paginé
  • MAMP a une gestion du cache qui pourrait nous embêter par la suite, pour palier à cela, nous allons désactiver le cache de MAMP:
    • Aller dans Applications > MAMP > bin > php > php8.2.0 (suivant la version de votre MAMP) > conf
    • Dans un éditeur de code, ouvrir le fichier php.ini
    • Chercher la section opcache
    • Commenter toutes les lignes de la section en mettant un point virgule devant

Ajouter du contenu

Modifier le fichier index.html

Changer le CSS

Modifier le fichier style.css

Pour plus d'information sur CSS Page Weaver: Lien vers le boilerplate d’origine et sa documentation

Fonctions CSS spécifiques

Paged.js utilise les fonctionnalités du print css (voir ci-dessus) et propose 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 {}

Vous pouvez également utiliser du contenu dynamique. Ici le contenu qui s'affichera dans la marge proviendra de la valeur de .chapter h1

@page {
    @top-right {
        content: string(title);
    }
    .chapter h1{
      string-set: title content(text);
    }
}

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*/
}

Exercice

À partir des 2 exercices précédents, avec CSS Page Weaver, concevoir et développer un livret A5 (ou format libre) du programme détaillé du colloque.
Télécharger le contenu pour l'exercice

Plugins pré-installés

Fullpage

Ce script permet de mettre des éléments en pleine page. Le plugin se trouve dans le dossier csspageweaver > plugins > fullPage.
Plugin fabriqué par Julie Blanc.

Dans le CSS, sur le(s) élément(s) que vous souhaitez voir apparaître en pleine page, ajoutez la propriété personnalisée suivante :

--pagedjs-full-page: page

La propriété peut prendre plusieurs valeurs:
- --pagedjs-full-page: page → L'élément sera retiré du flux et placé dans la page suivante..
- --pagedjs-full-page: left → L'élément sera retiré du flux et placé dans la page de gauche suivante.
- --pagedjs-full-page: right → L'élément sera retiré du flux et placé dans la page de droite suivante.
- --pagedjs-full-page: spread → L'élément sera retiré du flux et placé dans la prochaine double-page.
- --pagedjs-full-page: <number> → L'élément sera retiré du flux et placé dans la page que vous avez spécifiée. (avec --pagedjs-full-page: 4, l'élément est placé à la page 4).

Images en pleine page

Si vous souhaitez une image en pleine page, il est conseillé d'utiliser les propriétés habituelles objet-fit.

#figure{
  --pagedjs-full-page: page;
  width: 100%;
  height: 100%;
  margin: 0px;
}

img {
    object-fit: cover;
    object-position: 0px 0px;
    width: 100%;
    height: 100%;
}
  • Pour modifier la taille de l’image, utiliser width et height.
  • Pour changer la position de l’image, utilisez object-position.
  • Dans le cas de l'option spread, toute la largeur sera prise en compte, c'est-à-dire que width : 100% couvre toute la largeur.

Double page et pli central

Parfois, lors de la reliure d'un livre, les éléments qui couvrent la page doivent être décalés par rapport au pli central. Une valeur personnalisée peut être ajoutée à la page pour en tenir compte.

@page {
    --pagedjs-fold: 10mm;
}

FootnotesFix (Notes de bas de page)

Un script pour les notes de bas de page.
Le plugin se trouve dans le dossier csspageweaver > plugins > footnotesFix.
Plugin fabriqué par Julie Blanc.

Dans le fichier csspageweaver > plugins > footnotesFix > footnotes.css, les notes de bas de page sont déclarées.
Dans le fichier csspageweaver > manifest.json, il est possible de configurer le plugin:

  • selector → Sélecteur CSS pour l'élément note (doit être en span dans le HTML), par défaut .footnote
  • reset → Sélecteur CSS de l'endroit où vous souhaitez réinitialiser le compteur de notes. Si vous souhaitez réinitialiser le compteur sur la page : page

Pour insérer une note dans le HTML

<p>It is not the purpose<span class="footnote">This is a footnote</span> of this book to try to establish a claim for printing that it is an art.</p>

Pour modifier l'appel de notes et le marqueur

::footnote-call {
    vertical-align: super;
    font-size: 65%;
    line-height: normal;
}

::footnote-marker{
    font-weight: bold;
}

MarginNotes (Notes de côté de page)

Un script pour les notes de côté de page.
Le plugin se trouve dans le dossier csspageweaver > plugins > marginNotes.
Plugin fabriqué par Sarah Garcin, basé sur un plugin de Julie Blanc.

Dans le fichier csspageweaver > manifest.json, il est possible de configurer le plugin:

  • selector → Sélecteur CSS pour l'élément note (doit être en span dans le HTML), par défaut .sidenode
  • position → Position de la note, les options sont outside, inside, left, right.
    • outside : les notes des pages de gauche sont positionnées sur la marge gauche et les notes des pages de droite sur la marge droite. C'est la valeur par défaut.
    • inside : les notes de la page gauche sont positionnées sur la marge droite et les notes de la page droite sont positionnées sur la marge gauche.
    • left : les notes des deux pages sont positionnées sur la marge gauche.
    • right : les notes des deux pages sont positionnées sur la marge gauche.
  • reset → Sélecteur CSS de l'endroit où vous souhaitez réinitialiser le compteur de notes.
  • marker → Élement à insérier après le marqueur de la note. Par défaut la valeur est . soit 1. note

Beau Drapeau

Une interface pour gérer manuellement mais facilement les sauts de ligne et l'espacement des lettres des éléments textuels, dans le navigateur.

Les capacités d'édition sont activées à l'aide d'un bouton show / hide dans la fenêtre de paramètres.
Lorsqu'il est actif, deux actions peuvent être effectuées :

  • Ajouter des sauts de ligne forcés dans un élément de texte. Il suffit de les ajouter en appuyant sur les touches Maj + Entrée.
  • Augmenter ou diminuer l'espacement entre les lettres d'un élément. Il suffit de survoler un élément et d'appuyer sur les touches Maj + Roue de défilement.

Book Index

Un script pour générer un index de livre. Le plugin se trouve dans le dossier csspageweaver > plugins > createIndex.
Plugin fabriqué par Julie Blanc.

Formattage du HTML

Un index de livre permet de trouver une information rapidement dans une édition. Ainsi il faut localiser dans l’édition les endroits révélateur. Pour faire figurer un élément dans l'index, il faut formatter le HTML ainsi: 

<p>Ce texte est super <span class="book-index" data-book-index="important">important</span>, il doit figurer dans l’index.</p>

Le span doit contenir au moins 2 éléments :

  • une classe : elle est commune à tous les éléments span d’index, par défaut elle doit être nommée book-index
  • un data-attribute : il doit être nommé data-book-index, il indique le mot qui apparaîtra dans l'index.

Pour que l’index apparaisse, il faut ajouter à l’endoit souhaité dans le HTML: 

<div id="book-index"></div>

Regex Typo

Un script d’automatisation pour l’ortho typo. Le plugin se trouve dans le dossier csspageweaver > plugins > regexTypo.
Plugin fabriqué par Sarah Garcin, basé sur un plugin de Julie Blanc.

Installer un plugin

Les plugins pour CSS Page Weaver sont réunis sur cette page: https://gitlab.com/csspageweaver/plugins

Pour installer un plugin manuellement:

  • Aller sur la page du plugin
  • Télécharger le plugin en zip via Code > Download ZIP.
  • Décompresser le ZIP
  • Renommez le dossier extrait en supprimant le suffixe : -main
  • Déplacez le dossier dans le dossier csspageweaver/plugins/
  • Ajoutez les paramètres requis au fichier csspageweaver/manifest.json

Exercice

En partant de l'exercice précédent, tester les plugins de votre choix (ajouter un index, une table des matières, des notes de bas de page etc.)