Utilisation du CSS pour les exports en PDF

Présentation :

L'utilisation du CSS dans les exportations vous permet d'obtenir des rapports visuellement identiques en html ou en PDF. Toutefois, il convient de respecter certaines règles et de n'utiliser que les propriétés CSS qui sont interprétées de la même façon par les deux types d'exportations.

Liste des balises ou éléments traités en PDF

La balise body : 

Cette balise permet de renseigner le formatage de texte qui sera employé en général dans le document sauf redéfinition dans les éléments enfants.
Elle permet aussi éventuellement de redéfinir les marges par défaut du documents.

Propriétés interprétées :

Pour le texte : Font-family, Font-size, Font-weight, Font-style, Text-align, Color.

Pour les marges : Padding (et padding-left, padding-right ...)

Les blocs : H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE

Ces balises permettent de formater les blocks de textes que ce soit les titres, les paragraphes ou les commentaires.

Le formatage du texte peut être modifié dans ces blocks mais aussi la couleur de fond, les images de fond, les bordures.
Attention : Il existe une restriction au niveau des bordures pour les exports en PDF, et ce dans tous les éléments : toutes les bordures doivent être de la même couleur et de type solid. Il est par contre possible de définir indépendamment des bordures hautes, basses, droites ou gauches dans les blocks de texte (contrairement aux tableaux : cf plus loin).

Propriétés interprétés :

Pour le texte :
Font-family
Font-size
Font-weight
Font-style
Text-align
Color.

Pour les bordures :
Border-color
Border-width (left,right, …)
Border : Obligatoirement 3 propriétés dans l'ordre width style color exclusivement (la propriété style n'est pas interprétée puisque solid obligatoirement mais doit être présente pour la compatibilité html / PDF).

Pour les marges : 
margin (left,right ...) : Extérieures aux bordures
padding (left,right ...) : Interieures aux bordures.

Pour la couleur de fond :
Background-color

Pour les images : 
background-image (url de l'image)
background-repeat (repeat-x : toute la largeur, no-repeat : une seule fois, repeat-y toute la hauteur SI LA PRORIETE height du bloc a été définie)
background-position
background : Obligatoirement 5 propriétés dans l'ordre color url repeat positionX positionY exclusivement (la propriété attachment n'est pas interprété et NE DOIT PAS être renseignée.)

Pour la hauteur : 
height (exprimés en pixel exclusivement : 20px ou 20)
Attention : la hauteur peut être utile dans la définition d'un block notamment lorsqu'une image de fond est définie, cependant lors de l'export en PDF cette hauteur définie est absolument fixe, si la hauteur définie, les marges intérieures et la taille de la police ne permettent pas d'afficher le texte vous n'aurez aucun texte à l'intérieur de vos blocks (même raisonnement pour les cellules de tableaux). Il est donc important de tester vos exportations sur vos véritables données si vous modifiez la propriété height.
Note : La propriété width n'est pas prise en charge, vous pouvez vous servir de la proriétée padding pour jouer sur la largeur des blocs.

Les balises DIV (CONTAINER, INDICATOR mais aussi ID INDICATOR-1 INDICATOR-1... : 

Ces balises permettent de formater individuellement le texte de certains éléments selon le principe de l'héritage. Par contre, contrairement au HTML, ces balises ou classes ne permettent pas de modifier le format des éléments eux mêmes (border, background ...)

Propriétés interprétés :

Pour le texte :
Font-family
Font-size
Font-weight
Font-style
Text-align
Color.

Pour les marges :
margin (left,right ...)
padding (left,right ...)

Note : Les propriétés border, background-color n'étant pas interprétées pour ces éléments, le renseignement de padding OU de margin donnera le même résultat en PDF : une marge supplémentaire au composant.

Les tableaux :

Les balises TABLE, TR, TH, TD, classes THEADER, TODD, TEVEN, TLISTPOS, ID TLISTPOS_1... 

Pour le texte :
Font-family
Font-size
Font-weight
Font-style
Text-align
Color.

Pour les marges : 
margin (left,right ...)
padding (left,right ...)

Spécificités balises TD / TH 

Bordures (forcément encadrantes, forcément toutes de la même épaisseur) : 
Border-color 
Border-width
Border : Obligatoirement 3 propriétés dans l'ordre width style color exclusivement (la propriété style n'est pas interprétée puisque solid obligatoirement mais doit être présente pour la compatibilité html / PDF).
Note : renseigner la propriété border induit implicitement pour le PDF l'attribution de la propriété border-collapse:collapse de la balise table en html (à renseigner pour une compatibilité html / PDF)

Pour les marges intérieures : 
Padding (et padding-top, padding-left …) : va représenter l'espace entre la bordure et le texte.

Pour la couleur de fond : 
Background-color

Pour les images : 
background-image (url de l'image)
background-repeat (repeat-x : toute la largeur, no-repeat : une seule fois, repeat-y toute la hauteur SI LA PRORIETE height du bloc a été définie)
background-position
background : Obligatoirement 5 propriétés dans l'ordre color url repeat positionX positionY exclusivement (la propriété attachment n'est pas interprété et NE DOIT PAS être renseignée.)

Pour la hauteur : 
height (exprimés en pixel exclusivement : 20px ou 20) - Attention : même remarque que pour les blocs.

Spécificités balises TR

margin-left,margin-right : pour ajouter des marges spécifiques aux tableaux OU à certains tableaux (marche aussi sur la classe du tableau).

Travail sur les colonnes 

Pour travailler spécifiquement sur les colonnes que se soit la colonne en entier ou sur une distinction th/td, il convient de travailler sur des combinaisons de classes en respectant les conventions suivantes :

Travail sur la colonne entière, exemple :

.tListPos .tCol1{
    width:50px; // (pixels exclusivement)
    // mais aussi :
    padding:20px;
    text-align:center;
   color:blue;
   ...
}

Remplacer  tListPos par l'indicateur du tableau souhaité
Remplacer  tCol1 par tColx où x est le numéro de la colonne à modifier.

Notes :
La largeur 1 n'est pas prise en compte en tant que telle.
La largeur 1px (ou non renseignée) : la largeur par défaut de SeeUrank est prise en compte.
Si la version par défaut de SeeUrank n'est pas définie ou si on force cette valeur à 1 alors : Toutes les colonnes dont la largeur est définie auront cette largeur PUIS les autres colonnes vont se partager l'espace restant à part égale (si toutes les colonnes ont une largeur définie de 1px alors elles auront la même largeur).
La somme des largeurs de colonnes ne doit pas dépasser 808 pixels (ou moins si des marges de pages sont définies), sinon la plus grande des colonnes sera tronquée de la différence.
Une colonne ayant une largeur définie à 0px n'apparaitra pas.

Formatage des colonnes différentes entre th et td exemple :

.tListPos td.tCol2{
    padding:20px;
    color:blue;
    text-align:center;
    ...
}

Remplacer  tListPos par l'indicateur du tableau souhaité
Remplacer  tCol1 par tColx où x est le numéro de la colonne à modifier.
Remplacer td par th si vous souhaitez ne modifier que les colonnes titres.

Format acceptés : 

Font-family : Nom des polices exclusivement trueType pour le PDF

Font-size : (Par défaut 12 pixels). Unités : Pixels, sans unité, pt : valeur en pixel , em, ex, pc :  12 pixels * la valeur, % : pourcentage de 12 pixels, cm : 12 *valeur / 0.4 pixels, mm : 12 *valeur / 4 pixels, in : : 12 *valeur / 0.15 pixels

Font-weight : Si bold ou > 500 : gras

Font-style : Si autre chose que "normal" : Italique 

Text-decoration: Si "underline" : Souligné

Text-align : center, left ou right

Color (et toutes propriétés de couleurs) : sous la forme #000000 ou nom de la couleur.

Height et width : en pixels exclusivement (ou sans unité).

padding, margin : en pixels exclusivement (ou sans unité).

background-image : de la forme url(urlfichier) ou url("urlfichier"), fichiers distants exclusivement

background-position : center top ou 10 20 ou center 20 ...