Fiche CSS : Impression.Objet de la ficheÉtat de la fichePlan de la fiche
Avant proposL'écran et l'imprimante sont des modes de sortie très différents pour des données structurées agréablement. Ces deux modes de sortie ont leurs propres règles. Pendant qu'à l'écran des écritures claires auront belle allure sur des fonds sombres, ce n'est pas une bonne solution pour la sortie à l'imprimante. De plus les mises en pages sont nécessairement différentes, il faut tenir des dimensions des pages d'impression, des sauts de page etc. Toutes les directives présentées sur cette fiche ne fonctionnent pas avec tous les navigateurs. Fichier CSS pour mode de sortie impressionLes feuilles de style offrent la possibilité d'incorporer différents fichiers de feuilles de style pour les différents modes de sortie, qui peuvent contenir des définitions de formats différentes. Le logiciel doit décider lors de la présentation des pages quel fichier CSS incorporé est déterminant. Si le navigateur Web par exemple affiche les pages à l'écran, il doit utiliser le fichier CSS qui fixe expressément l"écran" comme mode de sortie, et si l'utilisateur imprime une page, le navigateur doit employer à la place le fichier CSS que vous avez mentionné pour le mode "imprimante". Cas des feuilles de style interneOn utilise l'attribut "media= print" de l'élément style pour attacher une feuille de style interne au média impression : <style media="print" type="text/css"> Cas des feuilles de style externeOn utilise l'attribut "media= print" de l'élément link pour attacher une feuille de style externe au média impression :
<link rel="stylesheet" media="print" href="impression.css"> Définir la mise en pageLa mise en page est définie en style global avec le mot clé page. Syntaxe@page { mentions sur la mise en page } Mentions sur la mise en page
Nota (1) : crop et cross peuvent être définies individuellement ou touts les deux, séparés par un espace. Dans ce cas les deux types de marque sont pris en compte. Les directives @page doivent se trouver en tête de feuille de style. Pages droite/gauche et première pageOn peut définir des mises en pages différentes pour les pages droites et gauche, ainsi que pour la première page. SyntaxesCes mises en page sont définies en style global avec le mot clé page. @page :left { mentions sur la mise en page des pages de gauche } Les mentions que l'on peut appliquer sur la mise en page des pages de gauche, droite ou première page sont les mêmes que précédemment, à savoir size, margin, marks. Les directives @page doivent se trouver en tête de feuille de style. Pages nomméesOn peut définir différents formats spéciaux pour certains éléments de la manière suivante :
Polices de caractèresUtiliser des polices avec empattement comme 'times new roman', times, serif beaucoup plus lisibles à l'impression que les polices sans empattement. Cacher des éléments à l'impressionDans le fichier CSS concernant l'impression utiliser display:none au lieu de visibility:hidden pour supprimer les éléments qui ne doivent pas apparaître à l'impression. En effet visibility:hidden cache l'élément mais l'espace réservé n'est pas libéré, ce qui peut entraîner des zones blanches à l'impression. display:none fait comme si l'élément n'existait pas. Définir les sauts de pageSi vous voulez forcer ou empêcher un saut de page, vous pouvez le faire au moyen de 2 attributs CSS page-break-before et page-break-after. SyntaxesPour imposer ou empêcher un saut de page avant l'élément sur lequel s'applique le style. <h1 style="page-break-before:always">xxxxxxxx</h1> Pour imposer ou empêcher un saut de page aprés l'élément sur lequel s'applique le style. <h1 style="page-break-after:always">xxxxxxxx</h1> Attributs
Lignes seules en fin de page ou début de pageEn fin de page (lignes orphelines) : propriété orphansOn peut empêcher que des sauts de page dans du texte courant se fassent si une seule ligne se trouve sur une page et toutes les autres lignes du paragraphe sur la page suivante. Pour cela on peut spécifier combien de lignes du texte courant
plus long doivent au minimum figurer sur la page avant le saut de
page. Un chiffre est permis qui exprime le nombre de lignes. Le
réglage par défaut est 2. Exemple : <style type="text/css"> h1,h2,h3,h4,p,td,ul,li {orphans:3;} </script En début de page (lignes veuves) : propriété widowsOn peut empêcher que des sauts de pages dans du texte courant se fassent si malencontreusement une seule ligne se trouve sur la nouvelle page et que toutes les autres lignes du paragraphe se trouvent sur la page précédente avant le saut de page. Pour cela on peut spécifier combien de lignes du texte courant plus long doivent au minimum figurer sur la page après le saut de page sur la nouvelle page. Un chiffre est permis qui exprime le nombre de lignes. Le réglage par défaut est 2. Exemple : <style type="text/css"> h1,h2,h3,h4,p,td,ul,li {widows:3;} </script> Faire apparaître le contenu des liensUtilisez la fonction attr(x) associé aux pseudo-éléments after ou before et à l'attribut content pour faire apparaître la destination des liens. Retrouvez ce mécanisme en détail dans la fiche "Structuration automatique des pages". ExempleCaractéristiques de la page exempleLe titre général de l'article est délimité par la balise <h1> suivant l'exemple : Tous les blocs sont délimités par les balises de paragraphe <p> suivant l'exemple : Les titres des articles sont délimités par la balise <h2> suivant l'exemple : Feuilles de style appliquée à cet exemple.
Remarques sur la feuille de style
La numérotation automatique des paragraphes est héritée du style media="all".
Résultats obtenus en fonction des navigateurs
Application au projet de site webLe but de l'exercice est de pouvoir imprimer (via la commande imprimer du navigateur) uniquement les informations concernant la Boutique du Fleuriste au niveau de la page d'accueil (index.html). Il s'agit en fait de récupérer une partie des informations contenues dans la fenêtre qui apparaît lors du survol du titre ("Bienvenue sur ...), et de l'imprimer sous forme de carte de visite. Il faudra pour cela créer une feuille de style externe de type "print" adaptée au résultat que l'on veut obtenir. Pour obtenir le résultat suivant lorsque l'on demande l'impression de la page web : |