GÉNIE MULTIMÉDIA: XSL-FO - Partie I

Transcription

1 GÉNIE MULTIMÉDIA: XSL-FO - Partie I Généralités Modèle de page unique Régions et modèle de boîtes Texte, listes, tableaux et objets externes Hyperliens Modèles de pages multiples Contenus statiques, titres courants, numéros de page Filets, lignes de conduite Conclusions et ressources Introduction XSL-FO (Formatting Object) est un langage de description de page utilisant la syntaxe XML complémentaire à XSLT qui décrit la présentation de données XML 2 Utilisation de XSL-FO application PDF XML proc. XSLT FO proc. FO XHTML XSLT + FO MIF 3

2 Utilisation de XSL-FO PDF XML processeur combiné XSLT + FO XHTML XSLT + FO MIF 4 Exemple XSL-FO <?xml version="1.0" encoding="utf-8"?> <fo:root xmlns:fo=" <fo:layout-master-set> <fo:simple-page-master master-name="only-page" page-width="14.8cm" page-height="21cm" margin="1cm"> <fo:region-body margin-top="0cm"/> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="only-page"> <fo:flow flow-name="xsl-region-body"> <fo:block font-family="sans-serif" font-size="24pt" line-height="36pt" padding-top="6pt" color="red" background-color="yellow" text-align="center"> Hello World! </fo:flow> </fo:page-sequence> </fo:root> 5 Composition d'une feuille de style Une feuille de style XSL-FO est formée de la combinaison de règles de transformation XSLT dont l'espace de noms est xmlns:xsl=" d'objets de formatage dont l'espace de noms est xmlns:fo=" 6

3 Exemple XSLT+FO <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="..." xmlns:fo="..."> <xsl:output method="xml"/> <xsl:template match="/"> <fo:root> <fo:layout-master-set>... </fo:layout-master-set> <fo:page-sequence master-reference="..."> <fo:flow flow-name="..."> <xsl:apply-templates/> </fo:flow> <fo:page-sequence/> </fo:root> </xsl:template> <xsl:template match="title"> <fo:block text-align="center" font-size="18pt"...> <xsl:apply-templates/> </xsl:template> </xsl:stylesheet> 7 Nature des présentations On peut distinguer les documents dont la présentation est guidée par la mise en page (layout-driven) journaux, magazines, affiches,... les documents dont la présentation est guidée par le contenu (content-driven) livres, rapport, article scientifique => XSL-FO (version 1.0) est conçu pour le second type (présentation guidée par le contenu) 8 Fonctions supportées XSL-FO supporte les fonctions suivantes: styles riches et typographiquement propres contenant des listes, des tableaux, etc. mises en pages multiples avec titres courants, notes en bas de page, etc. (pour livres) multilinguisme avec différents sens d'écriture : de gauche à droite, de droite à gauche, de haut en bas Les attributs de présentations sont inspirés de CSS 9

4 Structure globale Un document FO est formé d'un élément fo:root qui comprend 2 parties bien distinctes une description des structures en page (fo:layout-master-set) une description du contenu (fo:page-sequence) 10 Modèle de page unique L'élément fo:simple-page-master permet de spécifier les régions d'une simple page l'attribut master-name="..." sert de référence pour associer le contenu les attributs page-height et page-width définissent le format de la page d'autres attributs fixent les marges, le sens d'écriture, etc. 11 Exemple de page unique <fo:root xmlns:fo=" <fo:layout-master-set> <fo:simple-page-master master-name="only-page" page-width="14.8cm" page-height="21cm" margin-top="1cm" margin-bottom="1.5cm" margin-left="2cm" margin-right="2cm"> <fo:region-body/> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="only-page"> <fo:flow flow-name="xsl-region-body">...<!-- contenu --> </fo:flow> </fo:page-sequence> </fo:root> 12

5 Régions Le modèle de page comprend jusqu'à cinq régions une région centrale: region-body quatre régions périphériques: region-before, region-after, region-strat, region-end 13 Région centrale La page ainsi que la région centrale ont des marges: margin définit une marge pour tous les côtés margin-top, margin-bottom, marginleft, margin-right définissent les marges séparément 14 Régions périphériques Les dimensions des régions périphériques sont déterminées par l'attribut extend qui détermine sa "largeur" (dans le sens orthogonal au coté considéré) sa "longueur" est déterminée par la région centrale 15

6 Génération du contenu Le contenu d'un document se trouve dans un élément fo:page-sequence avec l'attribut master-reference="..." pour référencer le modèle de page Le contenu est placé dans des flux représentés par fo:flow (destiné à la région centrale) Les informations qui se répètent sur chaque page sont placées dans fo:static-content (pour les en-têtes, etc) 16 Flux vs. contenus statiques Flow Static-content 17 Richesse du contenu filets images - en ligne - en bloc tableaux listes contenu statique 18

7 Niveaux de contenu On distingue deux niveaux de contenu les boîtes de blocs de type fo:block (pour les titres, paragraphes, listes,...) les boîtes de lignes de type fo:in-line (pour des chaînes de caractères, des (petites) images,...) 19 Blocs vs. lignes block inline 20 Boîtes La mise en page est décrite à l'aide de boîtes (blocs ou lignes) imbriquées Chaque boîte est formée d'un contenu (content), d'un espace interne (padding), d'une bordure (border) et d'un espace externe (space) Les quatre côtés sont nommés relativement au sens d'écriture (before, after, start, end) 21

8 Boîtes de blocs Les boîtes de blocs sont des éléments récursifs de type fo:block et correspondent à des sections, titres, paragraphes, listes, tableaux, etc. (cf <div>) Les principaux attributs sont text-align avec comme valeurs start (ou left), end (ou right), center, justify,... line-height text-indent, start-indent space-before, space-after, padding-... border, border-... color, background-color, background-image 22 Boîtes de lignes Les boîtes de lignes sont placées de gauche à droite et découpées en lignes si nécessaire (cf. <span>) Elles sont récursives et peuvent contenir des blocs Les principaux attributs sont (voir aussi CCS2) font-family, font-size, font-style, font-weight, font-strech, font-variant, textdecoration,... letter-spacing, word-spacing,... color, background-color,... Plusieurs propriétés (padding, space, border,... ) ne semblent pas fonctionner (avec FOP)! 23 Héritage des attributs La plupart des attributs peuvent être hérités de l'élément parent (ou d'un autre ancêtre ) 24

9 Exemple: document texte <xsl:template match="title"> <fo:block font-size="24pt" text-align="center" space-before="24pt" space-after="12pt"> <xsl:apply-templates/> </xsl:template> <xsl:template match="parag"> <fo:block font-size="16pt" text-align="justify" space-before="3pt" space-after="3pt"> <xsl:apply-templates/> </xsl:template> <xsl:template match="emph"> <fo:inline font-weight="bold"> <xsl:apply-templates/> </fo:inline> </xsl:template> 25 Caractères spéciaux fo:character permet l'insertion d'un caractère spécial avec comme attributs: character avec comme valeur un caractère imprimable tel que "1" un code de la forme "&#x9999" font-family, font-style,... baseline-shift avec comme valeur "sub", "super", ou une valeur 26 Structure globale d'une liste deux variantes: avec ou sans <fo:list-item> fo:list-item fo:listblock... fo:list-item fo:list-item-label fo:list-item-body fo:list-item-label fo:list-item-body fo:block fo:block fo:block fo:block fo:list-block fo:list-item-label fo:block fo:list-itembody fo:block fo:list-item-label fo:block fo:list-item-body fo:block 27

10 Indentations L'indentation d une liste est contrôlée via les attributs startindent et end-indent associés aux étiquettes et aux corps de liste Comme alternative, on peut utiliser les attributs provisionallabel-separation et provisional-distance-betweenstarts La fonction label-end() retourne la position de la marge droite du label et body-start() retourne la position de la marge gauche du corps 28 Structure globale de tableaux Similaire au modèle de tableau de HTML fo:table fo:table-header fo:table-column fo:table-column fo:table-body fo:table-row fo:table-row fo:table-row fo:table-row fo:table-row fo:table-row fo:table-cell fo:table-block fo:table-cell fo:table-cell fo:table-block 29 Structure globale de tableaux Quelques commentaires les éléments fo:table-header et fo:table-footer sont facultatifs les éléments fo:table-column sont des éléments vides visant à factoriser des propriétés de formatage via leurs attributs (usuellement la largeur des colonnes) les propriétés de formatage classiques s appliquent aux éléments 30

11 Structure globale des tableaux La norme distingue entre l élément fo:table l élément fo:table-and-caption le positionnement de la légende est régi via l attribut caption-side NB: le processeur FOP de Apache n implémente actuellement pas ces éléments! 31 Fusion de colonnes <fo:table-row> <fo:table-cell border-style="solid"> <fo:block text-align="left">08 09 </fo:table-cell> <fo:table-cell number-columns-spanned="2" border-style="solid"> <fo:block text-align="center">plenary session </fo:table-cell> </fo:table-row> 32 Fusion de lignes <fo:table-row> <fo:table-cell border-style ="solid"> <fo:block text-align="left">09 10 </fo:table-cell> <fo:table-cell border-style="solid"> <fo:block text-align="center">paper 1 - session 1 </fo:table-cell > <fo:table-cell border-style="solid" number-rows-spanned="2"> <fo:block text-align="center">tutorial </fo:table-cell> </fo:table-row>... 33

12 Images et graphiques externes Deux éléments peuvent être utilisés pour inclure des éléments de type graphique fo:external-graphic pour insérer un graphique dont le format de description n est pas XML (par exemple, une image JPEG) fo:instream-foreign-object pour insérer un graphique dont le format de description est exprimé dans la syntaxe XML (par exemple, un graphique SVG ou une formule MathML) Ils peuvent être placés dans fo:bloc, soit verticalement dans la page fo:inline, soit sur une ligne de texte 34 Exemple: insertion d un graphique SVG <fo:block > <fo:instream-foreign-object> <svg xmlns=" width="5cm" height="1.5cm"> <xsl:element name="polygon"> <xsl:attribute name="style"> <xsl:value-of select="concat ('fill:',$color,'; stroke:black; stroke-width:1')"/> </xsl:attribute> <xsl:attribute name="points"> 35, , , , , , , , , ,16.1 </xsl:attribute> </xsl:element> </svg> </fo:instream-foreign-object> 35 Format des objets externes L attribut content-type permet de spécifier le type de graphique Soit comme un type MIME <fo:external-graphic content-type=«contenttype:image/gif» src=«resultat.gif»> Soit en termes d espace de nom <fo:instream-foreign-object xmlns:svg=« content-type=«namespace-prefix:svg»> 36

13 Propriétés des éléments graphiques Taille des graphiques les attributs height et width spécifient l espace dans la page réservé au graphique la valeur auto indique qu il faut considérer la taille effective de l objet graphique les attributs content-height et content-width spécifient la taille de l élément graphique lui-même 37 Propriétés des éléments graphiques S il y a divergence entre l espace réservé et la taille effective de l image, il faut spécifier la méthode de mise à l échelle. L attribut scaling indique s il faut faire une transformation uniform (valeur par défaut) ou non-uniform L attribut scaling-method permet de spécifier la méthode de mise à l échelle à utiliser auto integer-pixels resample-any-method??? 38 Autres propriétés de formatage L attribut language peut être associé aux éléments de type block ou caractère La découpe en page peut être contrôlée par les attributs suivants keep-with-next keep-with-previous keep-together break-before break-after 39

14 Hyperliens Deux types de liens peuvent être créés avec fo:basic-link : Liens internes A travers l attribut internal-destination en lui affectant l ID du block à atteindre Liens externes A travers l attribut external-destination en lui affectant l URL 40 Exemple: Hyperliens interne <fo:page-sequence master-reference="simple"> <fo:flow flow-name="xsl-region-body"> <fo:block id="a"> <fo:basic-link internal-destination="b">click HERE </fo:basic-link> to go to block with id="b". <fo:block id="b">block with id="b". <fo:basic-link internal-destination="a">click HERE </fo:basic-link> to go to block with id="a". </fo:flow> </fo:page-sequence> 41 Structure des modèles de pages 42

15 Modèle de pages répétitives Pour définir des pages multiples, il faut déclarer un élément fo:page-sequence-master contenant un élément fo:repeatable-page-master-reference faisant référence à l'objet fo:simple-page-master <fo:layout-master-set> <fo:simple-page-master master-name="single-page"...>...<!-- format de page --> </fo:simple-page-master> <fo:page-sequence-master master-name="many-pages"> <fo:repeatable-page-master-reference master-reference="single-page"/> </fo:page-sequence-master> </fo:layout-master-set> <fo:page-sequence master-reference="many-pages">...<!-- contenu --> </fo:page-sequence> 43 Exemple de pages répétitives <fo:layout-master-set> <fo:simple-page-master master-name="single-page"...>...<!-- format de page --> </fo:simple-page-master> <fo:page-sequence-master master-name="many-pages"> <fo:repeatable-page-master-reference master-reference="single-page"/> </fo:page-sequence-master> </fo:layout-master-set> <fo:page-sequence master-reference="many-pages">...<!-- contenu --> </fo:page-sequence> 44 Modèle de pages alternées Pour définir des pages alternées (par ex. impaire, paire), il faut: définir plusieurs modèles de pages simples définir un modèle de pages alternatives de type fo:repeatable-page-master-alternatives contenant des conditionnelles de type fo:conditional-pagemaster-reference avec les propriétés page-position avec les valeurs "first", "rest" ou "last" odd-or-even avec les valeurs "odd" ou "even"... 45

16 Exemple de pages alternées <fo:layout-master-set> <fo:simple-page-master master-name="first-page"...>... <fo:simple-page-master master-name="odd-page"...>... <fo:simple-page-master master-name="even-page"...>... <fo:page-sequence-master master-name="chapter-pages"> <fo:repeatable-page-master-alternatives> <fo:conditional-page-master-reference page-position="first" master-reference="first-page"/> <fo:conditional-page-master-reference odd-or-even="odd" master-reference="odd-page"/> <fo:conditional-page-master-reference odd-or-even="even" master-reference="even-page"/> </fo:repeatable-page-master-alternatives> </fo:page-sequence-master> </fo:layout-master-set> 46 Flux vs. élements statiques Les séquences de pages contiennent deux types d éléments des flots fo:flow contenant les données mêmes du document (un flot est associé à la région xsl-region-body d un modèle de page) des éléments statiques fo:static-content dont le contenu se répète sur les pages (en-têtes courants, no de page, etc.) Ces éléments sont associés à chacune des autres régions: xsl-region-before, xsl-region-after, xsl-region-start, xsl-region-end 47 Titres courants Les titres courants sont traités comme des éléments statiques le titre courant est représenté par un élément <fo:retrieve-marker> contenant un attribut retrieveclass-name="ref" qui référencie un élément <fo:marker marker-classname="ref"> dont le contenu (généré dynamiquement) détermine le contenu du titre courant Attention à la localisation des attributs de formatage! 48

17 Exemple: titres courants <xsl:template match="/">... <fo:static-content> <fo:block text-align="center"> <fo:retrieve-marker retrieve-class-name="running-title"/> </fo:static-content>... </xsl:template> <xsl:template match="section/title"> <fo:block font-size="10pt"> <fo:marker marker-class-name="running-title"> <xsl:value-of select="."/> </fo:marker>... </xsl:template> 49 Numérotation des pages L élément fo:page-number utilisé dans un contenu statique permet de placer le numéro de page La présentation des numéros de page est régie via des attributs associés aux éléments de type fo:page-sequence initial-page-number, force-page-count format, letter-value grouping-separator grouping-size 50 Exemple de pages numérotées <fo:page-sequence master-reference="alterning"> <fo:static-content flow-name="evenfooter"> <fo:block font-family="helvetica" font-size="10pt" text-align="left"> <fo:page-number/> </fo:static-content> <fo:static-content flow-name="oddfooter"> <fo:block font-family="helvetica" font-size="10pt" text-align="right"> <fo:page-number/> </fo:static-content> <fo:flow flow-name="xsl-region-body"> <xsl:apply-templates select=".//recipe"/> <fo:block break-before="page"> <xsl:apply-templates select=".//recipe/title"/> </fo:flow> </fo:page-sequence> 51

18 Notes de bas de page Les notes de bas de page sont produites au moyen d'un élément <fo:footnote> comprenant un élément <fo:inline> engendrant la référence dans le texte un élément <fo:footnote-body> engendrant le bloc placé au bas de la région xsl-region-body Les notes en bas de page ne sont pas gérées dans un flux séparé! 52 Exemple de note de bas de page Règle de fomatage en supposant que dans le source on ait <fnote label="symbol">content</fnote> <xsl:template match="fnote"> <fo:footnote> <fo:inline...><xsl:value-of <fo:footnote-body> <fo:block font-size="10pt"...> <fo:inline> <xsl:value-of <xsl:text> </xsl:text> <xsl:value-of select="."/> </fo:inline> </fo:footnote-body> </fo:footnote> </xsl:template> 53 Filets et lignes de conduites Les filets introduisent une ligne dans le document (similaire à l élément HR de HTML) Les lignes de conduites sont utilisées pour mettre en correspondance des éléments; par exemple, dans une table des matières. Les deux sont représentés par l élément fo:leader 54

19 Filets et lignes de conduites 6 attributs décrivent l apparence d un élément fo:leader leader-alignment: reference-area ou page, none, inherit leader-length leader-pattern: space, rule, dots, use-content, inherit leader-pattern-width: valeur ou use-font-metrics rule-style: none, dotted, dashed, solid, double, groove, ridge, inherit (semblable aux CSS) 55 Exemple: table des matières <fo:block id="{generate-id(./title)}" text-align="start" line-height="18pt" font-family="sans-serif" font-weight="bold" font-size="12pt"> <xsl:value-of select="./title"/>... <xsl:template match="title"> <fo:block font-size="9pt"> <fo:inline> <xsl:value-of select="."/> <fo:leader leader-pattern="dots" leader-length="1in"/> <xsl:text>p.</xsl:text> <fo:page-number-citation ref-id="{generate-id(.)}"/> </fo:inline> </xsl:template> 56 Conclusion XSL-FO est le complément à XSLT pour produire des documents formatés volumineux (brochures, livres, etc) de qualité typographique XSL-FO contient des concepts de haut niveau XSL-FO est incomplet Les implémentations sont encore très imparfaites! 57

20 Ressources XSL-FO Recommandation W3C Documentation Tutoriels Logiciel FOP (Apache) 58