Contents | < Bonjour Le Monde | La Disposition d'écoulement >

Les Paragraphes

Dans XSL-FO, les paragraphes sont créés en utilisant les élémentsfo:block. De divers attributs peuvent être placés sur un paragraphe: 

<?xml version="1.0" encoding="utf-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
        <fo:simple-page-master master-name="LetterPage" 
                                  page-width="6in" page-height="5in">
            <fo:region-body region-name="PageBody" margin="0.7in"/>
        </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="LetterPage">
        <fo:flow flow-name="PageBody" font-family="Arial" font-size="12pt" > Œ
            <fo:block text-align="justify" space-after="0.5cm"   
                      border="0.5pt solid green" >
                C'est le premier paragraphe du texte justifié. Remarquez comment                le texte remplit tout l'espace disponible. La bordure   
				environnante est de 0.5 points de large, couleur verte et  
				pleine. Ce paragraphe a un espace-après égale à 0.5 centimètres.
            </fo:block>
            <fo:block text-align="justify" space-before="2cm"  
                      border="0.5pt dotted red" >Ž
                C'est le deuxième paragraphe du texte justifié. Cette fois la 
				bordure est pointillée et rouge. Ce paragraphe a un espace-avant                égale à 2 centimètres.
            </fo:block>
        </fo:flow>
    </fo:page-sequence>
</fo:root>
Pour le code source complet pour cet exemple de code voyez "Tutorial/Simple Paragraphs.fo" situé dans le dossier XML Documents Samples/Tutorial .

Dans cet exemple, nous avons deux paragraphes de texte justifié, entourées par des bordures, avec une distance de 2 centimètres entre eux. Le résultat du rendant devrait être identique à la figure suivante.

Figure 1

Il y a plusieurs choses à remarquer:

Œ Nous avons placé la police à Arial, 12 points de taille sur l'élément parent fo:flow.

 Ž La distance entre les paragraphes n'est pas additive; au lieu de cela, la plus grande valeur persistera. Si un fo:block est le premier ou le dernier élément dans une page, vous allez remarquer également que l'espace n'est plus présent! Ce comportement est contrôlé par les attributs space-before.conditionality et space-after.conditionality. Si l'espace correspondant est fixé sur "retain" (retenir), il ne sera pas jeté.

L'Alignement du Texte

L'alignement horizontal du texte est contrôlé par deux attributs: text-align qui placera l'alignement pour toutes les lignes du texte, sauf la dernière, qui est placée à text-align-last. 

Ceci est important à retenir, parce que si votre paragraphe a seulement une ligne de texte, vous devez utiliser text-align-last pour placer l'alignement.

Des valeurs possibles pour text-align et text-align-last sont:

Les Polices

Il y a six propriétés qui contrôlent l'aspect du texte: font-family, font-style, font-variant, font-weight, font-size, line-height.

Pour placer le visage de la police, vous employez l'attribut font-family. Par exemple font-family="Arial" indiquera que la police d'Arial doit être employée.

S'il sont indiquées des familles avec des polices nombreuses, le rendeur sélectionnera la première disponible, ainsi vous devriez détailler les polices de la plus spécifique à la plus générique. Par exemple, font-family="Arial, Helvetica" choisira "Helvetica" si "Arial" n'est pas présent dans le système.


La graisse de la police peut être précisée en utilisant l'attribut font-weight. Vous pouvez la placer à une valeur absolue ("bold" ou "normal"), ou à une valeure relative à la graisse de la police appartenant à l'élément parent ("bolder" or "lighter").


Pour indiquer la taille de police, employez l'attribut font-size. Cette taille peut être une longueur (1cm, 0.5in, 10pt, etc..) ou un pourcentage (0.5, 50%) de la police de l'élément parent.


Une propriété très importante et souvent abusée est line-height. Cette propriété détermine le minimum line-height (la taille de ligne) pour un élémént de groupe. La valeur par défaut pour line-height est 120%, c'est-à-dire, la ligne sera 20% plus grande que le texte. Par exemple, si le texte est 10 points de taille, la taille de la ligne sera de 12 points. Le texte sera centré sur la ligne, 1 point à partir du haut, et 1 point en bas. Dans l'exemple suivant nous avons placé la line-height (la taille de ligne) à 200%: 

<?xml version="1.0" encoding="utf-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
        <fo:simple-page-master master-name="LetterPage" 
                               page-width="6in" page-height="5in">
            <fo:region-body region-name="PageBody" margin="0.7in"/>
        </fo:simple-page-master>
    </fo:layout-master-set>
    <fo:page-sequence master-reference="LetterPage">
        <fo:flow flow-name="PageBody">
            <fo:block font-family="Arial" font-size="12pt" line-height="200%"  
                      border="1px outset blue">
                Pour ce paragraphe, la line-height est placée à 200% ... 
            </fo:block>
        </fo:flow>
    </fo:page-sequence>
</fo:root>
Pour le code source complet pour cet exemple de code voyez "Tutorial/Line Height.fo" situé dans le dossier XML Documents Samples/Tutorial.

Le résultat du rendant est montré dans la figure suivante.

Figure 2

Nous avons mentionné avant que ceci est la taille minime de la ligne: si une ligne contient une image de 100 points de hauteur, la taille totale de la ligne (seulement pour cette ligne) sera de 102 points.

Pour régler toutes les propriétés de la police ensemble vous pouvez utiliser un raccourci de l'attribut font. Un raccourci de l'attribut va placer ensemble les valeurs pour des attributs multiples. Le racourci de l'attribut font a la syntax suivante: 

font="{style} {variant} {weight} {size}/{line-height} family".

Par exemple, pour obtenir le même effet qu'on a réalisé dans le premier exemple de ce chapitre, vous pouvez utilisez font="10pt Arial". Remarquez s'il vous plaît qu'en utilisant ce raccourci de l'attribut, au lieu de spécifier individuellement chaque propriété de la police, vous remettrez à zéro les valeurs des attributs nonspécifiés: 

<fo:flow flow-name="PageBody">
    <fo:block font="10pt bold Arial"  border="1px solid blue">
        Ceci est l'élémént parent du groupe avec des caractères gras de 12 points, 
		d'Arial.
        <fo:block font="10pt Verdana"  border="1px solid red">
            Ceci est l'élémént enfant du groupe; le même raccourci est utilisé 
			aussi pour le changement de la police, mais cette fois les 
			caractères ne sont pas gras parce que la graisse a été omise.
        </fo:block>
        Quand l'enfant du groupe se termine, le reste du contenu du parent est affiché.
    </fo:block>
</fo:flow>
Pour le code source complet pour cet exemple de code voyez "Tutorial/Inheritance.fo" situé dans le dossier XML Documents Samples/Tutorial.

Le résultat du rendant est montré dans la figure suivante.

Figure 3

XF Rendering Server 2008 peut utiliser également les polices de Type1 (post-scriptum) et de TrueType.

Avant leur utilisation les polices doivent être installées en Windows. Pour instaler une nouvelle police, vous devez simplement tirer et déposer les fichiers des polices dans Control Panel/Fonts.

Les Bordures

Les propriétés d'une bordure spécifient la largeur, la couleur, et le style des bordures comme objet. Ces propriétés s'appliquent à tous les éléments de XSL-FO.

Toutes les bordures sont dessinées sur la partie supérieure du fond de la boîte.

Pour placer tous les attributs pour une bordure donnée, vous pouvez utilisez les attributs de sténographie border-top, border-right, border-bottom, border-left . Le format est: 

border-top="{width} {style} {color}".

Les notations suivantes sont équivalantes:

<fo:block border-top-style="plein" border-top-color="rouge" border-top-width="1mm"> 
	... 
</fo:block>
<fo:block border-top="1mm rouge plein"> 
	... 
</fo:block>

La propriété de la bordure est une propriété de sténographie pour placer la même largeur, la même couleur, et le même style ou modèle pour chacune des quatre bordures d'une boîte. La propriété de la bordure ne peut pas placer des valeurs différentes sur les quatre bordures. Pour faire ainsi, il faut employer une ou plusieurs des autres propriétés de la bordure. Le format est: 

border="{width} {style} {color}".

Les bordures arrondies

XF Rendering Server 2008 soutient le dessin des boîtes avec les coins arrondis en utilisant les propriétés de la bordure-rayon décrites dans les fonds d'écran de CSS3 et dans Le module des bordures.


Vous pouvez placer le rayon individuellement pour chaque coin en changeant les propriétés border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius . Pour changer tous les quatre coins ensemble, utilisez border-radius. Le format est: 

<length> <length>?

S'il est indiquée seulement une valeur, le coin sera dessiné comme un cercle; s'il sont indiquées deux valeurs, le coin sera dessiné comme une ellipse.


Vous pouvez lire plus sur le sujet des fonds d'écran de CSS3 et du module des bordures sur CSS3 W3C Working Draft.


L'échantillon suivant dessinera un paragraphe entouré par une bordure arrondie: 

<fo:block border="3pt rouge plein" border-radius="5pt" 
          background="rose" padding="2pt">Bonjour le monde</fo:block>

Remarquez s'il vous plaît que le fond aura des coins arrondis même si la bordure n'est pas visible.

Figure 4

Les ombres de baisse

Un autre dispositif nouveau décrit dans CSS3 est la capacité d'indiquer des ombres de baisse pour différents éléments de page. Vous pouvez lire plus sur CSS3 W3C Working Draft.

Dans l'exemple suivant, l'ombre est dessinée avec un vert clair et descentrée avec 3pt dans les deux directions, horizontale et verticale. L'ombre est transparente, de sorte que le texte recouvert puisse être vu à travers lui. 

<fo:block>
				Le suivant 
 				<fo:inline background="yellow" box-shadow="3pt 3pt lime" padding="3pt" 
 				border-radius="4pt">mot</fo:inline>
 				a un fond jaune et une ombre vert clair.
 			</fo:block>

Figure 5

Pour le code source complet voyez "Tutorial/RoundedBorders.fo" situé dans le dossier XML Documents Samples/Tutorial.

Les Fonds

Les fonds des objets de XSL-FO peuvent être des couleurs ou des images. Les propriétés de fond permettent aux auteurs de placer une image de fond, la répéter, etc.

Si seulement une valeur de pourcentage ou de longueur est donnée, elle va placer seulement la position horizontale, et la position verticale sera 50%. Si deux valeurs sont données, la position horizontale vient d'abord. On permet des combinaisons des valeurs de longueur et de pourcentage, (par exemple, '50% 2cm'). On permet des positions négatives. Les mots-clés ne peuvent pas être combinés avec les valeurs de pourcentage ou celles de longueur (toutes les combinaisons possibles sont données ci-dessus).

Pour placer tous les attributs pour le fond d'un seul élément, vous pouvez utiliser l'attribut de sténographie background . Le format est: 

background="{color} {image} {repeat} {position}".

 

Contents | < Bonjour Le Monde | La Disposition d'écoulement >