Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
Langages de publication paginée
Stéphane Crozat
Ingénierie Documentairehttp://doc.crzt.fr
14 septembre 2016
Table des matières
I - Introduction à XSL-FO 3
1. Qu'est ce que XSL-FO ? ......................................................................................................... 3
2. Structure d'un fichier XSL-FO ................................................................................................ 3
3. Exemple XSL-FO ....................................................................................................................... 4
II - Introduction à XHTML+CSS pour la publication PDF 6
1. Principe ........................................................................................................................................ 6
2. Exemple ....................................................................................................................................... 7
3. Flying Saucer .............................................................................................................................. 8
III - Exercices 10
1. Travaux pratiques FO et Flying Saucer ............................................................................... 11
1.1. Exercice : ............................................................................................................................................................ 111.2. Exercice : ............................................................................................................................................................ 121.3. Exercice : ............................................................................................................................................................ 15
Solutions des exercices 16
Bibliographie 17
Introduction à XSL-FO
3
--
-
-
-
1. Qu'est ce que XSL-FO ?
XSL-FO (on parle généralement plus simplement de FO) est la seconde partie du langage XSL, qui définit un langage de présentation en vue de la publication de documents imprimables. C'est un langage XML permettant d'obtenir un fichier PDF une fois traité par un moteur de rendu FO.
Le langage FO n'est pas destiné à être écrit manuellement, mais plutôt à être obtenu automatiquement après une transformation XSL-XSLT.
Chaîne de publication FO (Technologies Apache)
Apache FOP, moteur , ne supportant pas la totalité du standardopen sourcehttp://xmlgraphics.apache.org/fopXEP, moteur commercial, plus complethttp://www.renderx.comAntenna House Formatterhttp://www.antennahouse.com
2. Structure d'un fichier XSL-FO
Un fichier XSL-FO est composé de deux parties :
La mise en page générale ou layoutLe contenu et sa mise en forme
Introduction à XSL-FO I
Définition : XSL Formatting Objects
Remarque : FO est un langage de publication
Complément : Moteurs FO
http://xmlgraphics.apache.org/fop/http://www.renderx.com/http://www.antennahouse.com/
Exemple XSL-FO
4
1 2 =3 4 =56 78 9
10 =1112 1314 15
12 Contenu3
L'élément contient des attributs de stylage.fo:block
1 Contenu
L'élément contient des attributs de stylage.fo:inline
3. Exemple XSL-FO
1 2 =3 4 = = = =
= = ="1cm" margin-bottom "1cm" margin-left "1cm" margin-right "1cm">5 =6 =7 =8 =9 =
10 11 12 =13 =14 15 = Hello world!16 17 18 19
Syntaxe
Syntaxe : Balisage de bloc
Syntaxe : Balisage inline
=
=
=
Contenu
Contenu
=
= = = = = = = = = = = = Hello world!
Exemple XSL-FO
5
-
--
Exemple de structure de page FO
"Publier à partir de XML : Formatting Objects" (par Bruno Bachimont) (cf. )fo.pdf, pp157-167XML : Cours et exercice **
Stylesheet Tutorial, Sample Files of Formatting Objects and Sample Stylesheetshttp://www.antennahouse.com/XSLsample/XSLsample.htm
Complément : Pour aller plus loin
Complément
http://www.antennahouse.com/XSLsample/XSLsample.htm
Introduction à XHTML+CSS pour la publication PDF
6
-
---------
1. Principe
CSS introduit avec CSS 2.1 puis prolonge avec CSS3 des extensions pour gérer les .médias paginés
En effet les pages XHTML destinées à l'écran ne sont pas paginées : le permet d'étendre la scrollingtaille d'une page à l'infini.
À l'inverse, lors d'une impression typiquement, la taille de la page est fixe.
Ces extensions recouvrent typiquement la gestion :
des format de papiersdes marges d'impressiondes sauts de pages manuels et automatiquesdes paragraphes solidairesdes veuves et orphelinsdes numérotations de pagesdes tables de matièresdes entêtes et pieds de page...
Chaîne de publication CSS (Technologies Apache et Flying Saucer)
PrinceXMLRéférence commerciale (version d'évaluation disponible).
Introduction à XHTML+CSS pour la publication PDF
II
Schéma de principe
Exemple : Exemples de moteurs XHTML+CSS
Exemple
7
-
-
-
-
-
-
-http://www.princexml.com/Flying SaucerMoteur Open Source.http://code.google.com/p/flying-saucer/Antenna House Formatterhttp://www.antennahouse.com/
CSS3 Module: Paged Media, , 10 October 2006.W3C Working Drafthttp://www.w3.org/TR/css3-page/CSS Paged Media Module Level 3, , 6 October 2011.Editor's Drafthttp://dev.w3.org/csswg/css3-page/CSS Generated Content for Paged Media Module, , 08 June 2010.W3C Working Drafthttp://www.w3.org/TR/css3-gcpm/CSS Fonts Module Level 3, , 4 October 2011.W3C Working Drafthttp://www.w3.org/TR/css3-fonts/Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, , 07 W3C RecommendationJune 2011.http://www.w3.org/TR/CSS21/
Structure générale XHTML (cf. p.)
Balises de base XHTML (cf. p.)
Introduction à CSS (cf. p.)
2. Exemple
1 2 3 Document4 5 6 7 Document8 9 Chapitre 1
10
...
11...
12 13 14 Chapitre 215...
16 17 18
Complément : Standards associés
Rappel
Exemple : XHTML
Document
Document Chapitre 1
...
...
Chapitre 2...
http://www.princexml.com/http://code.google.com/p/flying-saucer/http://www.antennahouse.com/http://www.w3.org/TR/css3-page/http://dev.w3.org/csswg/css3-page/http://www.w3.org/TR/css3-gcpm/http://www.w3.org/TR/css3-fonts/http://www.w3.org/TR/CSS21/
Flying Saucer
8
-
1 @page {2 size: A4 portrait;3 margin: 2cm;4 @bottom-right { 5 content: counter(page); 6 font-size: 8pt; 7 font-family: "Computer Modern";8 text-align: right; 9 }
10 }11 div.part {12 page-break-before: always;13 }14 h1, h2 { 15 text-align: center;16 }17 p { 18 text-align: justify;19 orphans: 0; 20 widows: 0;21 }
Introduction to page composition with CSShttp://www.antennahouse.com/CSSInfo/index.html
3. Flying Saucer
Flying Saucer est un moteur de rendu permettant de générer du PDF à partir d'une source XHTML+CSS.
Il exploite les possibilités de CSS 2.1 et quelques fonctions CSS3.
Il est .Open Source
Télécharger la version officielle en ligne sur http://code.google.com/p/flying-saucer/
[cf. Exécutable Java Flying Saucer]
1 java -cp lib/core-renderer.jar:lib/iText-2.1.7.jar org.xhtmlrenderer.simple.PDFRenderer
1 java -cp lib/core-renderer.jar;lib/iText-2.1.7.jar org.xhtmlrenderer.simple.PDFRenderer
Exemple : CSS
Complément
Fondamental : Programme Flying Saucer
Syntaxe : Ligne de commande Flying Saucer (Linux et Mac)
Syntaxe : Ligne de commande Flying Saucer (Windows)
@page { size: A4 portrait; margin: 2cm; @bottom-right { content: counter(page); font-size: 8pt; font-family: "Computer Modern"; text-align: right; }}div.part { page-break-before: always;}h1, h2 { text-align: center;}p { text-align: justify; orphans: 0; widows: 0;}
java -cp lib/core-renderer.jar:lib/iText-2.1.7.jar org.xhtmlrenderer.simple.PDFRenderer
java -cp lib/core-renderer.jar;lib/iText-2.1.7.jar org.xhtmlrenderer.simple.PDFRenderer
http://www.antennahouse.com/CSSInfo/index.htmlhttp://code.google.com/p/flying-saucer/
Flying Saucer
9
-- FS prend en entrée du XHTML, le fichier HMTL doit donc être un XML valide
FS échoue quelques fois à générer un nouveau PDF lorsque le fichier de destination est ouvert (le supprimer en cas de problème).
http://code.google.com/p/flying-saucer/
Remarque
Complément
http://code.google.com/p/flying-saucer/
Exercices
10
ExercicesIII
Exercice :
11
1. Travaux pratiques FO et Flying Saucer1.1. Exercice :
[45 min]
Soit les fichiers DITA ci-après.
1 2 3 4 Wheel barrow5 6
A good wheel barrow will save your back from extensive trauma when you garden.
7 8
1 2 3 4 Taking out the garbage5 6 7 Find out from the town what day of the week garbage is collected in your neighborhood.
8 The night before collection, place the garbage cans on the curb.9 After the garbage has been collected, move the cans back into your garage.
10 11 12 13 Lawnmower14 15
Wheel barrow
A good wheel barrow will save your back from extensive trauma when you garden.
Taking out the garbage Find out from the town what day of the week garbage is collected in your neighborhood.
The night before collection, place the garbage cans on the curb. After the garbage has been collected, move the cans back into your garage.
Lawnmower
Exercice :
12
Question 1
Question 2
1.2. Exercice :[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 (cf. p.8)
Question 1
Question 2
En utilisant Oxygen, produire une XSLT qui permet de publier en PDF via FO le fichier de type .concept
Indices :
Oxygen : Transformations XSLT (cf. p.)
Scénario de publication XSLT->FO->PDF avec Oxygen
Penser à la gestion des .namespaces
1
[ ]solution n°1 *[ ] p.16
Traiter de la même façon le fichier de type .task
Lancer en ne précisant aucune feuille de style (désactiver la feuille de style dans le Flying Saucerfichier XHTML) pour observer le stylage de base appliqué aux éléments XHTML (FS contient une feuille de style par défaut).
Appliquer un style simple sur les éléments ( , , ) et observer les changements dans le PDF : h1 h2 pcentrer les titres et justifier les paragraphes par exemple.
Exercice :
13
Question 3
Question 4
Question 5
Question 6
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"
http://www.w3.org/TR/css3-page/#page-box-page-rule
Modifier la police du document, en utilisant la police spécifiée dans le fichier Computer Modern du dossier de l'exemple.polices/cmunrm.ttf
Indices :
CSS Fonts Module Level 3
Section : "4 Font resources > 4.1 The @font-face rule"
http://www.w3.org/TR/css3-fonts/#font-face-rule
Il faut déclarer un pour les 4 types de polices (normal, bold, italic, bold/italic).@font-face
La propriété est spécifique à FS et permet d'embarquer la police dans -fs-pdf-font-embedle PDF.
Insérer des sauts de page avant chaque partie du document ( de classe ) et éviter les div partveuves et les orphelins (adapter le document pour visualiser la gestion des veuves et orphelins).
Indice :
CSS3 Module: Paged Media
Section : "5. Page Breaks"
http://www.w3.org/TR/css3-page/#page-breaks
Numéroter automatiquement les parties en utilisant un compteur personnalisé.
Indices :
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
Section : "Syntax and basic data types > 4.3.5 Counters"
http://www.w3.org/TR/CSS21/syndata.html#counter
La pseudo-classe permet d'insérer le compteur avant le contenu de l'élément:before inline
http://www.w3.org/TR/css3-page/#page-box-page-rulehttp://www.w3.org/TR/css3-fonts/#font-face-rulehttp://www.w3.org/TR/css3-page/#page-breakshttp://www.w3.org/TR/CSS21/syndata.html#counter
Exercice :
14
Question 7
Question 8
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 géré en interne par le moteur.page
Indices :
CSS Generated Content for Paged Media Module
Section : "2. Running headers and footers"
http://www.w3.org/TR/css3-gcpm/#running-headers-and-footers
Les , n'hérite de rien : il faut dupliquer les règles de mise en @bottom-left @bottom-rightforme (police, taille)
CSS Paged Media Module Level 3
Section : "7.1. Page-based counters"
http://dev.w3.org/csswg/css3-page/#page-based-counters
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é , il peut ensuite être référencé par un position: running() content:
.element()
Indices :
CSS Generated Content for Paged Media Module
Section : "2. Running headers and footers"
http://www.w3.org/TR/css3-gcpm/#running-headers-and-footers
On utilise la balise du plutôt que de créer un autre élément portant le titre, le title head étant caché par la feuille de style par défaut, on force son affichage dans une première head
règle : head {display: block;}
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.
http://www.w3.org/TR/css3-gcpm/#running-headers-and-footershttp://dev.w3.org/csswg/css3-page/#page-based-countershttp://www.w3.org/TR/css3-gcpm/#running-headers-and-footers
Exercice :
15
Question 9
1.3. Exercice :[2h]
Soit les fichiers DITA
[cf. Sources XML "Garage tasks and concepts"][cf. Publication PDF "Garage concepts"][cf. Publication PDF "Garage tasks"]Question 1
Question 2
Question 3
Créer une table des matières.
Indices :
CSS Generated Content for Paged Media Module
Section : "3. Leaders"
http://www.w3.org/TR/css3-gcpm/#leaders
La fonction insère des points jusqu'à la fin de la ligne.leader('.')
la fonction récupère la valeur du compteur page tel target-counter(attr(href), page)qu'il est à l'élément pointé par l'attribut .href
NB : Cela ne fonctionne que pour le compteur dans .page Flying Saucer
Écrire une transformation XSLT pour intégrer les différents fichiers DITA en un seul fichier XML.
Indice :
Utiliser la fonction et l'instruction .document() xsl:copy
Principales instructions XSLT (cf. p.)
Écrire une transformation XSLT pour obtenir un PDF en utilisant XHTML+CSS et Flying Saucer.
Écrire une transformation XSLT pour obtenir un PDF en utilisant XSL-FO et Oxygen.
Indice :[cf. "Publier à partir de XML : Formatting Objects" (par Bruno Bachimont)]
http://www.w3.org/TR/css3-gcpm/#leaders
Solutions des exercices
16Stéphane Crozat (Contributions : David Rivron)
Exercice p. 12> Solution n°1
[cf. Exemple de solution]
Solutions des exercices
Bibliographie
17Stéphane Crozat (Contributions : David Rivron)
Alexandre Brillant, , , [ISBN 978-2212126914]XML : Cours et exercices Eyrolles 2007
Bibliographie
Introduction à XSL-FOQu'est ce que XSL-FO ?Structure d'un fichier XSL-FOExemple XSL-FO
Introduction à XHTML+CSS pour la publication PDFPrincipeExempleFlying Saucer
ExercicesTravaux pratiques FO et Flying SaucerExercice :Exercice :Exercice :
Solutions des exercicesBibliographie