Langages de publication paginée · 2016. 9. 14. · 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

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 :


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 :


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

Documents

Langages de publication paginée · 2016. 9. 14. · 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