Styles et bibliothèques externes

(S)CSS

Vous pouvez utiliser CSS pour styliser vos documents et leur donner vie. Nous vous proposons en effet un peu plus que cela. L’onglet CSS vous permet en réaliter d’écrire du code SCSS.

L’un des (très) nombreux avantages de SCSS est la possibilité d’imbriquer des règles CSS, permettant ainsi d’organiser plus facilement votre code. Il est également possible d’utiliser des variables !

$accentColor: #4c84ff;
$lightTextColor: #fff;

h1, h2, h3 {
  color: $accentColor;
}

.alertBox {
  background: $accentColor;
  color: $lightTextColor;
  padding: 30px;

  li {
    list-style-type: upper-roman;
  }
}

CSS modernes

Vous pouvez utiliser des propriétés CSS modernes comme Flexbox ou les Variables librement. Attention cependant d’en faire usage dans les modèles récents. Les anciens modèles utilisent un moteur de rendu vieillissant, qui gère très mal ce genre de règles. Si vous utilisez encore d’anciens modèles, préférez des aleternatives plus classiques.

Styles d’impression

Vous pouvez utilisez les propriétés CSS d’impression pour optimiser le flot du texte d’une page à l’autre.

Sauts de pages

Vous pouvez tirer parti des propriétés page-break-before, page-break-inside et page-break-after pour indiquer quel comportement le contenu doit adopter. Si vous souhaitez par exemple insérer un saut de page avant chaque titre de niveau 1, vous pouvez utiliser page-break-before :

h1 {
  page-break-before: always;
}

Et voilà !

Les valeurs les plus fréquentes sont les suivantes :

auto
Saut de page au besoin (défaut)
always
Insérer systématiquement un saut de page avant l’élément
avoid
Éviter (si possible) d’insérer une saut de page avant l’élément

Astuce de pro : Si vous souhaitez contrôler finement l’emplacement de vos sauts de page, vous pouvez définir une classe .pageBreak qui insert toujours un saut de page.

.pageBreak {
  page-break-before: always;
}

Vous pouvez ensuite l’utiliser sur une balise <div> que vous placerez à l’endroit où vous souhaitez insérer un saut de page :

<p>Je suis un paragraph</p>
<div class="pageBreak"></div>
<p>Woohoo ! Je suis sur une nouvelle page !</p>

“orphans” et “widows”

Un autre moyen pour que votre contenu se comporte comme vous le souhaitez est de donner quelques indices sur la façon dont un paragraphe devrait se comporter quand il ne contient pas suffisement de ligne en début ou fin de page.

La propriété orphans (orphelins) indique le nombre minimum de lignes qui peuvent rester en fin de page. Si un paragraphe ne peut pas respecter ce minimum, un saut de page sera inséré avant ce dernier.

p {
  orphans: 3;
}

Dans le même genre, la propriété widows indique le nombre minimum de lignes qui peuvent apparaitre en début de page. Si un paragraphe ne peut pas respecter ce minimum, un saut de page sera inséré avant ce dernier.

p {
  widows: 3;
}

Bibliothèques externes

PDFMonkey ne propose pas de style par défaut, cela vous permet de définir le votre. Cela veut également dire que vous pouvez importer une bibliothèque externe, disponible sur un CDN par exemple.

Style

Si par exemple vous souhaitez importer la bibliothèque [Bulma][bulma_doc], vous pouvez utiliser l’instruction @import pour le faire :

@import url('https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css');

Une fois cela fait, vous pouvez commencer à utiliser les classes de Bulma :

<section class="hero is-primary">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Titre primaire</h1>
      <h2 class="subtitle">Sous-titre primaire</h2>
    </div>
  </div>
</section>

Polices de caractères

Les polices externes peuvent également être importées. PDFMonkey ne propose pas de polices par défaut mais vous pouvez profiter de Google Fonts par exemple. De nouveau utilisez @import pour cela :

@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');

h1 {
  font-family: 'Permanent Marker';
}

Icônes

Si vous souhaitez utiliser des icônes, c’est également possible.

@import url('https://use.fontawesome.com/releases/v5.11.2/css/all.css');