FO - Cours (Stéphane Crozat)

Langages de
publication paginée
Ingénierie Documentaire
http://doc.crzt.fr
Stéphane Crozat
14 septembre 2016
Table des
matières
I - Introduction à XSL-FO
1. Qu'est ce que XSL-FO ?
3
......................................................................................................... 3
2. Structure d'un fichier XSL-FO
3. Exemple XSL-FO
................................................................................................ 3
....................................................................................................................... 4
II - Introduction à XHTML+CSS pour la publication PDF
6
1. Principe ........................................................................................................................................ 6
2. Exemple ....................................................................................................................................... 7
3. Flying Saucer
.............................................................................................................................. 8
III - Exercices
1. Travaux pratiques FO et Flying Saucer
10
............................................................................... 11
1.1. Exercice : ............................................................................................................................................................ 11
1.2. Exercice : ............................................................................................................................................................ 12
1.3. Exercice : ............................................................................................................................................................ 15
Solutions des exercices
16
Bibliographie
17
Introduction à XSL-FO
Introduction à XSLFO
I
1. Qu'est ce que XSL-FO ?
Définition : XSL Formatting Objects
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.
Remarque : FO est un langage de publication
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)
Complément : Moteurs FO
- Apache FOP, moteur open source, ne supportant pas la totalité du standard
http://xmlgraphics.apache.org/fop
- XEP, moteur commercial, plus complet
http://www.renderx.com
- Antenna House Formatter
http://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 layout
- Le contenu et sa mise en forme
3
Exemple XSL-FO
Syntaxe
1 <?xml version="1.0" encoding="utf-8"?>
2 <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
3 <fo:layout-master-set>
4 <fo:simple-page-master master-name="...">
5
6 <!--mise
en page -->
7
8 </fo:simple-page-master>
9 </fo:layout-master-set>
10 <fo:page-sequence master-reference="...">
11
12 <!--contenu
-->
13
14 </fo:page-sequence>
15 </fo:root>
Syntaxe : Balisage de bloc
1 <fo:block>
2 Contenu
3 </fo:block>
L'élément fo:block contient des attributs de stylage.
Syntaxe : Balisage inline
1 <fo:inline>Contenu</fo:inline>
L'élément fo:inline contient des attributs de stylage.
3. Exemple XSL-FO
1 <?xml version="1.0" encoding="utf-8"?>
2 <fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
3 <fo:layout-master-set>
4 <fo:simple-page-master master-name="A4" page-height="297mm" page-width="210mm" margin-top=
"1cm" margin-bottom="1cm" margin-left="1cm" margin-right="1cm">
5 <fo:region-body margin="3cm"/>
6 <fo:region-before extent="2cm"/>
7 <fo:region-after extent="2cm"/>
8 <fo:region-start extent="2cm"/>
9 <fo:region-end extent="2cm"/>
10 </fo:simple-page-master>
11 </fo:layout-master-set>
12 <fo:page-sequence master-reference="A4">
13 <fo:flow flow-name="xsl-region-body">
14 <fo:block>
15 <fo:inline font-weight="bold">Hello world!</fo:inline>
16 </fo:block>
17 </fo:flow>
18 </fo:page-sequence>
19 </fo:root>
4
Exemple XSL-FO
Exemple de structure de page FO
Complément : Pour aller plus loin
- "Publier à partir de XML : Formatting Objects" (par Bruno Bachimont) (cf. fo.pdf)
- XML : Cours et exercice * , pp157-167
*
Complément
- Stylesheet Tutorial, Sample Files of Formatting Objects and Sample Stylesheets
http://www.antennahouse.com/XSLsample/XSLsample.htm
5
Introduction à XHTML+CSS pour la publication PDF
Introduction à
XHTML+CSS pour
la publication PDF
II
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 scrolling permet d'étendre la
taille 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
des
des
des
des
des
des
des
...
format de papiers
marges d'impression
sauts de pages manuels et automatiques
paragraphes solidaires
veuves et orphelins
numérotations de pages
tables de matières
entêtes et pieds de page
Schéma de principe
Chaîne de publication CSS (Technologies Apache et Flying Saucer)
Exemple : Exemples de moteurs XHTML+CSS
- PrinceXML
Référence commerciale (version d'évaluation disponible).
6
Exemple
http://www.princexml.com/
- Flying Saucer
Moteur Open Source.
http://code.google.com/p/flying-saucer/
- Antenna House Formatter
http://www.antennahouse.com/
Complément : Standards associés
- CSS3 Module: Paged Media, W3C Working Draft, 10 October 2006.
http://www.w3.org/TR/css3-page/
- CSS Paged Media Module Level 3, Editor's Draft, 6 October 2011.
http://dev.w3.org/csswg/css3-page/
- CSS Generated Content for Paged Media Module, W3C Working Draft, 08 June 2010.
http://www.w3.org/TR/css3-gcpm/
- CSS Fonts Module Level 3, W3C Working Draft, 4 October 2011.
http://www.w3.org/TR/css3-fonts/
- Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, W3C Recommendation, 07
June 2011.
http://www.w3.org/TR/CSS21/
Rappel
Structure générale XHTML (cf. p.)
Balises de base XHTML (cf. p.)
Introduction à CSS (cf. p.)
2. Exemple
Exemple : XHTML
1 <html>
2 <head>
3 <title>Document</title>
4
<link href="exemple.css" type="text/css" rel="stylesheet"/>
5 </head>
6 <body>
7 <h1>Document</h1>
8 <div id="chapter1" class="part chapter">
9 <h2>Chapitre 1</h2>
10 <p>...</p>
11 <p>...</p>
12 </div>
13 <div id="chapter2" class="part chapter">
14 <h2>Chapitre 2</h2>
15 <p>...</p>
16 </div>
17 </body>
18 </html>
7
Flying Saucer
Exemple : CSS
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 }
Complément
- Introduction to page composition with CSS
http://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.
Fondamental : Programme Flying Saucer
Télécharger la version officielle en ligne sur http://code.google.com/p/flying-saucer/
[cf. Exécutable Java Flying Saucer]
Syntaxe : Ligne de commande Flying Saucer (Linux et Mac)
1 java -cp lib/core-renderer.jar:lib/iText-2.1.7.jar org.xhtmlrenderer.simple.PDFRenderer <input.xhtml>
<output.pdf>
Syntaxe : Ligne de commande Flying Saucer (Windows)
1 java -cp lib/core-renderer.jar;lib/iText-2.1.7.jar org.xhtmlrenderer.simple.PDFRenderer <input.xhtml>
<output.pdf>
8
Flying Saucer
Remarque
- 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).
Complément
http://code.google.com/p/flying-saucer/
9
Exercices
Exercices
III
10
Exercice :
1. Travaux pratiques FO et Flying Saucer
1.1. Exercice :
[45 min]
Soit les fichiers DITA ci-après.
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- wheelbarrow.xml -->
3 <concept id="wheelbarrow" xml:lang="en-us">
4 <title>Wheel barrow</title>
5 <conbody>
6 <p>A good wheel barrow will save your back from extensive trauma when you garden.</p>
7 </conbody>
8 </concept>
1 <?xml version="1.0" encoding="utf-8"?>
2 <!-- takinggarbage.xml -->
3 <task id="takinggarbage" xml:lang="en-us">
4 <title>Taking out the garbage</title>
5 <taskbody>
6 <steps>
7 <step><cmd>Find out from the town what day of the week garbage is collected in your neighborhood.
</cmd></step>
8 <step><cmd>The night before collection, place the garbage cans on the curb.</cmd></step>
9 <step><cmd>After the garbage has been collected, move the cans back into your garage.
</cmd></step>
10 </steps>
11 </taskbody>
12 <related-links>
13 <link href="../concepts/lawnmower.xml" format="dita" type="concept"
><linktext>Lawnmower</linktext></link>
14 </related-links>
15 </task>
11
Exercice :
Question 1
[solution n°1 p.16]
[ *]
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 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns:fo="http:
//www.w3.org/1999/XSL/Format">
Question 2
Traiter de la même façon le fichier de type task.
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
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 2
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.
12
Exercice :
Question 3
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
Question 4
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.
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 @font-face pour les 4 types de polices (normal, bold, italic, bold/italic).
La propriété -fs-pdf-font-embed est spécifique à FS et permet d'embarquer la police dans
le PDF.
Question 5
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).
Indice :
CSS3 Module: Paged Media
Section : "5. Page Breaks"
http://www.w3.org/TR/css3-page/#page-breaks
Question 6
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 :before permet d'insérer le compteur avant le contenu inline de l'élément
13
Exercice :
Question 7
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.
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 @bottom-left, @bottom-right n'hérite de rien : il faut dupliquer les règles de mise en
forme (police, taille)
CSS Paged Media Module Level 3
Section : "7.1. Page-based counters"
http://dev.w3.org/csswg/css3-page/#page-based-counters
Question 8
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>).
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 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;}
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.
14
Exercice :
Question 9
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 leader('.') insère des points jusqu'à la fin de la ligne.
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.
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
Écrire une transformation XSLT pour intégrer les différents fichiers DITA en un seul fichier XML.
Indice :
Utiliser la fonction document() et l'instruction xsl:copy.
Principales instructions XSLT (cf. p.)
Question 2
Écrire une transformation XSLT pour obtenir un PDF en utilisant XHTML+CSS et Flying Saucer.
Question 3
É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)]
15
Solutions des exercices
Solutions des
exercices
> Solution n°1
Exercice p. 12
[cf. Exemple de solution]
16
Stéphane Crozat (Contributions : David Rivron)
Bibliographie
Bibliographie
Alexandre Brillant, XML : Cours et exercices, Eyrolles, 2007 [ISBN 978-2212126914]
17
Stéphane Crozat (Contributions : David Rivron)