Livret A5

Cet exemple se propose de transformer le gabarit d’une simple page A4 (recto seul) vers une double page A5 (recto-verso) en supprimant l’identité de l’EBABX.

Le thème booklet comprend le code résultant de cette modification du thème par défaut. Il est possible de l’activer en le configurant dans le fichier config.yml:

theme: booklet

Une démo est visible sur ateliers.esad-pyrenees.fr/pagetypetoprint/booklet

Étapes

• js/print/pagedjs.css
  • desactivation de la feuille de style interface/recto-verso.css
• body.php
  • courants et folio: suppression du logo EBABX et du diplôme
  • courants et folio: réorganisation pour positionnement en bas de page uniquement
  • suppression des notes de marge au profit de notes de bas de page : suppression des scripts js/screen/sideNotes.js et js/print/imageNotes.js
• css/print.css
  • format et marges
  • gestion des titres courants
  • notes de marge
  • mise en page du sommaire

Détails CSS print

Format et marges:

@page {
  size: 148mm 210mm;

  @bottom-left-corner {
    content: element(folioRunning);
    text-align: left;
  }
  @bottom-left {
    content: element(titleRunning);
    text-align: left;
  }
  @footnote {
    float: bottom;
  }
}  
@page:right {
  margin: 1cm 2cm 2.5cm 1cm;
}
@page:left {
  margin: 1cm 1cm 2.5cm 2cm;
}
@page cover {
  margin: 1cm 1cm 2.5cm 1cm;    
  @bottom-left-corner {
    display: none;
  }
  @bottom-left {
    display: none;
  }
}
@page:blank {
  @bottom-left-corner {
    display: none;
  }
  @bottom-left {
    display: none;
  }
}

Couverture, réorganisation :

  .meta-year { grid-column: 3; grid-row: 1; }
  .meta-data { grid-column: 1; grid-row: 1; }

Modifications des titres courants :

  /* running title */
  .runningtitle {
    display: none;
    position: running(titleRunning);
  }
  .folio{
    font-weight: bold;
    text-align: right;
  }
  .folio::before{
    content: counter(page);
    font-weight: bold;
  }
  .pagedjs_margin .runningtitle {
    gap:var(--spacer);
    padding: 1cm 0 .5cm;
    display: flex !important;
    justify-content: space-between;
  }
  .pagedjs_left_page .runningtitle {
    flex-direction: row-reverse;
  }
  .pagedjs_right_page .runningtitle {
    flex-direction: row;
  }
  .pagedjs_left_page .runningtitle .title,
  .pagedjs_right_page .runningtitle .name { display: none; }

Modification des images de note :

  .imagenote {
    width: 33%;
    display: block;
    margin: var(--spacer) 0 0 var(--spacer);
    font-size: var(--smallsize);    
  }
  .imagenote.printleft {
    float: left;
    margin: var(--spacer) var(--spacer) 0 0;
  }
  .imagenote.printright {
    float: right;
    margin: var(--spacer) 0 0 var(--spacer);
  }

Pour les annexes, suppression des marges spécifiques, affichage du titre et suppresion du retrait dans les interviews :

section.appendices { /* margin-left: -6.5cm; */ }
.appendices > h2 { /* display: none; */ }
section.references { /* margin-left: -6.5cm; */ }
.references > h2 { /* display: none; */ }
.interview > h2 { /* display: none; */ }
.interview p {
  --indent: 0px;
}

Glossaire et références bibliographiques sur deux colonnes uniquement :

.glossary,
.columns {
  font-size: 0.85em;
  columns: 2;
  column-gap: var(--spacer);
}

Saut de page avant le sommaire :

  #nav {
    page-break-before: right;
    page-break-after: right;
    counter-reset: page 1;
    height: auto;
  }

Mise en page du sommaire :

#list-toc-generated .toc-element a::before {
  /* position: absolute; */
  /* margin-left: calc(-4em - 20px); */
  display: inline-block;
  text-align: left;
}
#list-toc-generated .toc-element-level-2 a::before {
  /* margin-left: calc(-4em - 40px); */
}