Utilisation de CSS pour formater des documents à imprimer
Si vous avez déjà imprimé des réservations de billets ou des itinéraires vers un hôtel à partir du Web, vous n'avez probablement pas été impressionné par les résultats. Vous ignorez peut-être que les documents imprimés peuvent être stylisés de la même manière qu'ils le peuvent à l'écran, en utilisant les feuilles de style en cascade (CSS).
Séparation des préoccupations
Un avantage clé de CSS est la séparation du contenu de la présentation. Dans les termes les plus simples, cela signifie au lieu d'un balisage stylistique très démodé tel que:
<font size="7"><b>Heading</b></font>
Nous utilisons le balisage sémantique:
<h1>Heading</h1>
Non seulement cela est beaucoup plus propre, mais cela signifie également que notre présentation est séparée de notre contenu. Les navigateurs rendent les éléments h1 sous forme de texte large et gras par défaut, mais nous pouvons changer ce style à tout moment avec une feuille de style:
h1 { font-weight: normal; }
En rassemblant ces déclarations de style dans un fichier séparé et en référençant ce fichier à partir de notre document HTML, nous pouvons encore mieux utiliser la séparation. La feuille de style peut être réutilisée et nous pouvons modifier ce fichier unique à tout moment pour mettre à jour la mise en forme de chaque document qui l'utilise.
Inclure une feuille de style d'impression
De la même manière que pour inclure une feuille de style d'écran, nous pouvons spécifier une feuille de style pour l'impression. Une feuille de style d'écran est généralement incluse comme suit:
<link href="base.css" rel="stylesheet" />
Cependant, un attribut supplémentaire, media , permet un ciblage basé sur le contexte dans lequel le document est rendu. Par défaut, l'élément précédent est équivalent à:
<link href="base.css" rel="stylesheet" media="all" />
Cela signifie que la feuille de style sera appliquée à tout support sur lequel le document est rendu. Cependant, l'attribut media peut également prendre des valeurs d'impression et d'écran:
<link href="print.css" rel="stylesheet" media="print" />
Dans cet exemple, la feuille de style print.css ne sera utilisée que lorsque le document est imprimé. C'est un mécanisme très utile. Nous pouvons rassembler tous les styles courants (peut-être la famille de polices ou l'espacement des lignes) dans une feuille de style qui s'applique à tous les médias, et la mise en forme spécifique aux médias dans des feuilles de style individuelles. Encore une fois, c'est une autre utilisation de la séparation des préoccupations.
Quelques exemples de déclarations de style
Un fond propre
Vous ne voulez certainement pas gaspiller d'encre en imprimant un arrière-plan coloré ou une image d'arrière-plan. Commencez par réinitialiser les valeurs par défaut de ces valeurs qui peuvent avoir été définies dans votre document:
body {
background: white;
color: black;
}
Vous souhaiterez peut-être également empêcher l'impression des images d'arrière-plan. Elles doivent être décoratives et, par conséquent, ne pas faire partie intégrante de votre contenu:
* {
background-image: none !important;
}
Contrôle des marges
Un autre point évident à considérer concernant l'impression est la marge de la page. Bien que CSS offre un moyen de définir la taille de la marge, vous devez garder à l'esprit que votre navigateur et votre imprimante peuvent également influencer les paramètres de marge eux-mêmes.
Par exemple, dans la boîte de dialogue d'impression de Chrome, il existe un paramètre de marge qui a des valeurs incluant aucun et personnalisé qui remplacera tout ce qui est spécifié via CSS:
Pour cette raison, il est recommandé de laisser les décisions de marge au lecteur sur les pages Web publiques. Cependant, pour un usage personnel ou pour créer une mise en page par défaut, la définition des marges d'impression via CSS peut être appropriée. La règle @page permet de définir des marges et doit être utilisée comme suit:
@page {
margin: 2cm;
}
CSS a également la capacité pour des mises en page d'impression plus sophistiquées, telles que la variation de la marge selon que la page est impaire (à droite), paire (à gauche) ou la page de couverture.
Malheureusement, cela est mal pris en charge – en particulier l'option de page de garde – mais il peut être utilisé dans une mesure minimale. Les styles suivants produisent des pages avec des marges inférieures légèrement plus grandes que celles du haut et des marges légèrement plus grandes sur le bord extérieur de la page que sur le dos:
@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}
Masquer le contenu non pertinent
Tout le contenu ne conviendra pas à une version imprimée de votre document. Si votre page comprend une navigation par bannière, des publicités ou une barre latérale, vous souhaiterez peut-être empêcher ces détails d'apparaître dans la version imprimée, par exemple:
#contents, div.ad { display: none; }
Corriger les liens
Les hyperliens ne sont évidemment pas pertinents dans les documents imprimés, vous voudrez donc probablement supprimer tous les styles qui les différencient du texte environnant:
a { text-decoration: none; color: inherit; }
Cependant, vous voudrez peut-être toujours que les lecteurs aient accès aux URL d'origine, et une solution simple consiste à les insérer automatiquement après le texte lié:
a[href]:after {
content: " (" attr(href) ")";
font-size: 90%;
color: #333;
}
Ce CSS donne des résultats tels que les suivants:
a [href]: après cible spécifiquement la position après ( : après ) chaque élément de lien ( a ) qui a réellement une URL ( [href] ). La déclaration de contenu insère ici la valeur de l'attribut href entre crochets. Notez que d'autres règles de style peuvent être appliquées pour contrôler l'affichage du contenu généré.
Gestion des sauts de page
Pour éviter que les sauts de page ne laissent un contenu isolé ou ne le brisent maladroitement au milieu, utilisez les propriétés de saut de page : page-break-before , page-break-after et page-break-inside . Par exemple:
table { page-break-inside: avoid; }
Cela devrait aider à empêcher les tableaux de s'étendre sur plusieurs pages, à condition qu'aucun ne dépasse une seule page. De même:
h1, h2 { page-break-before: always; }
Cela signifie que ces en-têtes commencent toujours une nouvelle page. Cela pourrait poser des problèmes si vous suivez immédiatement le h1 de votre page avec un h2, car le h1 se retrouvera sur une page tout seul. Pour éviter cela, annulez simplement le saut de page à l'aide d'un sélecteur qui cible cette instance spécifique, par exemple:
h1 + h2 { page-break-before: avoid; }
Affichage des styles d'impression
Dans tous les cas, votre navigateur et votre système d'exploitation doivent fournir une fonction d'aperçu avant impression, souvent dans le cadre de la boîte de dialogue d'impression standard.
Le navigateur Chrome facilite la vérification et même le débogage de vos styles d'impression via les outils de développement, comme le montre cet exemple montrant un CV avec une feuille de style d'impression. Tout d'abord, ouvrez le menu principal et sélectionnez Plus d'outils, puis l'option Outils de développement :
Dans le nouveau panneau qui apparaît, sélectionnez Menu , puis Plus d'outils , puis Rendu :
Ensuite, faites défiler jusqu'au paramètre Emuler le type de média CSS . La liste déroulante vous permet de basculer entre les vues d'impression et d'écran de votre document:
Lors de l'émulation de la feuille de style d'impression, le navigateur Styles standard est disponible pour inspecter et modifier les règles de style en direct. Gardez à l'esprit que l'émulation de la sortie d'impression sur un écran n'est toujours pas précise à 100%. Le navigateur ne sait rien de la taille du papier et la règle @page ne peut pas être émulée.
Impression vers un PDF
Une fonctionnalité pratique des systèmes d'exploitation modernes est la possibilité d'imprimer dans un fichier PDF. En fait, tout ce que vous pouvez imprimer peut, à la place, être envoyé dans un fichier PDF – ce n'est pas vraiment une surprise car un fichier PDF est censé représenter un document imprimé, après tout.
Cela fait du HTML, en combinaison avec une feuille de style d'impression, un excellent moyen de créer un document de haute qualité qui peut être envoyé en pièce jointe et imprimé.
Imprimez une variété de documents
Vous pouvez utiliser une feuille de style d'impression pour créer des documents de qualité, y compris tout ce qui va de votre CV aux recettes ou aux annonces d'événements. Les pages Web semblent généralement laides et contiennent des détails indésirables lors de l'impression, mais un petit nombre de modifications de style peut considérablement améliorer les résultats d'impression. L'enregistrement des résultats finaux au format PDF est un moyen rapide de créer des documents professionnels attrayants.