Stylage d'un générateur PDF

Remarque

Chacun(e) peut s'organiser comme bon lui semble pour réaliser l'habillage. Le principe étant, au bout du compte, de modifier les fichiers qui se trouvent dans le dossier .skin.doss.

Néanmoins dans ce document sera décrite une méthode optimisée et utilisée par Odigi.

Remarque

Le générateur PDF est en réalité un générateur qui produit d'abord le contenu sous forme de page web HTML. C'est pourquoi la création de l'habillage se fait comme pour un générateur web : modification d'images et de feuilles de style CSS.

Ce contenu HTML est ensuite interprété par une "moulinette" PDF qui le transforme en document PDF.

Le rendu primordial HTML est donc très ressemblant au rendu final PDF. Ce qui est utile pour façonner l'habillage.

Remarque

Le principe de la méthode de stylage pour un générateur PDF est de :

  1. générer un contenu de test et visualiser le rendu primordial HTML dans un navigateur

  2. travailler le nouveau stylage dans le rendu primordial HTML jusqu'à satisfaction du résultat obtenu

  3. copier les modifications réalisées dans SCENARIstyler dans les sources de l'habillage

  4. tester le résultat en générant la publication PDF nouvellement

Attention

Toutefois, certaines règles CSS, spécifiques aux rendus papier, ne seront pas visibles dans le rendu primordial HTML.

Il faudra donc faire les modifications à l'aveuglette et voir ce que ça donne en générant le PDF.

RemarquePublication PDF avec PostScriptum⚓

Pour les publications PDF avec PostScriptum, il est possible d'ouvrir le rendu primordial directement sur l'application PostScriptum (au lieu d'un navigateur). Cela permet d'avoir un rendu proche du rendu PDF (pagination, en-tête et pied de page etc.) et de pouvoir utiliser l'outils de développement web, comme sur n'importe quel autre navigateur.

  1. Ouvrir le fichier .skinset dans SCENARIstyler

  2. Se placer sur l'onglet Tests

  3. Si aucun contenu de test est configuré, faire clic droit sur l’icône de l'item de test

  4. Sélectionner la publication qui doit servir pour tester l'habillage

  5. Générer la publication puis révéler la publication générée

    Une fenêtre de navigation système ouvre le dossier source.

    Dans ce dossier source il y a un dossier skin. Son contenu est identique au contenu du dossier .skin.doss de l'habillage dans SCENARIstyler.

    C'est dans ce dossier skin que se trouve le matériel graphique qui définit l'aspect visuel de la publication : feuilles de style CSS, polices, images, ...

    C'est dans ce dossier qu'il faudra réaliser les modifications.

  6. Ouvrir le fichier index.xhtml pour ouvrir la publication primordiale HTML et ainsi pouvoir faire les modifications de stylage pertinentes en visualisant directement le résultat sous forme HTML quand c'est possible.

  7. Dans le navigateur web, naviguer dans le contenu jusqu'à l'élément que l'on souhaite modifier avec le nouveau stylage.

  8. Faire clic droit sur l'élément que l'on souhaite styler puis choisir Examiner l'élément (ou instruction similaire sur les navigateurs autres que Firefox)

    Apparaissent alors différents blocs dans la fenêtre dont :

    • le contenu html avec l'élément html cliqué surligné
    • les règles CSS appliquées à cet élément

    ExempleExemple de règle CSS⚓

    .home #navigation a span {

    display: inline-block;

    padding-top: 10px;

    border: 1px solid red;

    }

    Signifie :

    "tous les éléments span qui sont dans un élément a, lui-même dans un élément qui a comme id "navigation", lui-même dans un élément de classe css "home" auront les propriétés suivantes : affichage de type bloc en ligne, espace de 10 pixels au-dessus, et bordure rouge pleine de 1 pixel"

  9. À côté de chaque règle css est indiqué l'emplacement de la règle dans les feuilles de style.

    Par exemple : main.css:557

    Ceci signifie : "cette règle se trouve dans la feuille de style main.css à la ligne 557"

  10. Il est possible de modifier à la volée, dans le navigateur, les attributs CSS. Ça peut être pratique pour affiner le style que l'on souhaite appliquer.

  11. Ouvrir la feuille de style voulue dans le système de fichier (fenêtre ouverte précédemment en cliquant sur ) dans le dossier skin.

  12. Faire les modifications CSS pertinentes sous forme de surcharge CSS.

    C'est-à-dire qu'une fois que la règle CSS à modifier a été identifiée, il faut la copier en fin de fichier CSS et modifier son contenu pour obtenir ce que l'on souhaite.

    AttentionModifier la CSS dans Opale⚓

    Dans le cas de Opale WEB (et SCORM) et PDF, les règles CSS sont à ajouter en fin de fichier skin.css.

    Dans le cas de Opale DIAPO, les règles CSS sont à ajouter en fin de chaque fichier où a été localisée la règle CSS à modifier.

    AttentionModifier la CSS dans Dokiel⚓

    Dans le cas de Dokiel WEB et PDF, les règles CSS sont à ajouter en fin de fichier skin.css.

  13. Une fois les modifications réalisées et enregistrées, actualiser le contenu HTML dans le navigateur pour constater le résultat

  14. Répéter l'opération autant que nécessaire et, une fois que le résultat est satisfaisant, copier le contenu du dossier skin de la publication générée, dans le dossier .skin.doss correspondant dans SCENARIstyler.

    Attention

    Surtout de pas oublier cette étape !

    Dans les précédentes lignes, nous décrivons une méthode où les modifications sont réalisées dans le contenu HTML généré. Il ne faut donc pas oublier de copier les modifications dans les sources du skin.

  15. Revenir à SCENARIstyler, générer à nouveau le contenu de test, et consulter le PDF généré pour vérifier que les modifications sont satisfaisantes.