[45 minutes]
La réalisation de ce tutoriel porte sur la publication progressivement améliorée du fichier XHTML disponible en exemple.
Installer et tester Flying Saucer.
Question
Lancer Flying Saucer en ne précisant aucune feuille de style (désactiver la feuille de style dans le fichier XHTML) pour observer le stylage de base appliqué aux éléments XHTML (FS contient une feuille de style par défaut).
Question
Appliquer un style simple sur les éléments (h1, h2, p) et observer les changements dans le PDF : centrer les titres et justifier les paragraphes par exemple.
Question
Préciser un style de page qui réduit la taille des pages et augmente leurs marges.
Indice
CSS3 Module: Paged Media
Section : "3. Page Boxes: the @page Rule"
Question
Modifier la police du document, en utilisant la police Computer Modern spécifiée dans le fichier polices/cmunrm.ttf du dossier de l'exemple.
Indice
CSS Fonts Module Level 3
Section : "4 Font resources > 4.1 The @font-face rule"
Indice
Il faut déclarer un @font-face pour les 4 types de polices (normal, bold, italic, bold/italic).
Indice
La propriété -fs-pdf-font-embed est spécifique à FS et permet d'embarquer la police dans le PDF.
Question
Insérer des sauts de page avant chaque partie du document (div de classe part) et éviter les veuves et les orphelins (adapter le document pour visualiser la gestion des veuves et orphelins).
Question
Question
Insérer des numéros de page en marge, dont la position dépend si l'on se situe sur une page paire ou impaire. On utilisera le compteur page géré en interne par le moteur.
Indice
CSS Generated Content for Paged Media Module
Section : "2. Running headers and footers"
Indice
Les @bottom-left, @bottom-right n'hérite de rien : il faut dupliquer les règles de mise en forme (police, taille)
Indice
CSS Paged Media Module Level 3
Section : "7.1. Page-based counters"
Question
Insérer le titre du document en entête des pages.
L'élément portant le contenu à mettre en marge doit être sorti du "flot" par la propriété position: running(<identifiant>), il peut ensuite être référencé par un content: element(<identifiant>).
Indice
CSS Generated Content for Paged Media Module
Section : "2. Running headers and footers"
Indice
On utilise la balise title du head plutôt que de créer un autre élément portant le titre, le head étant caché par la feuille de style par défaut, on force son affichage dans une première règle : head {display: block;}
Indice
La mise en forme des blocs référencés de cette manière n'est pas facile, il ne vaut mieux pas trop en abuser.
Question
Créer une table des matières.
Indice
CSS Generated Content for Paged Media Module
Section : "3. Leaders"
Indice
La fonction leader('.') insère des points jusqu'à la fin de la ligne.
Indice
la fonction target-counter(attr(href), page) récupère la valeur du compteur page tel qu'il est à l'élément pointé par l'attribut href.
NB : Cela ne fonctionne que pour le compteur page dans Flying Saucer.