Dans cet article, nous passons en revue l'art de créer des pages Web faciles à imprimer avec CSS.

"Qui imprime des pages Web?" Je vous entends pleurer! Relativement peu de pages seront jamais reproduites sur papier. Mais considérons:

• impression de billets de voyage ou de concert
• reproduisant des itinéraires ou des horaires
• sauvegardant un PDF pour une lecture hors ligne
• accédant à des informations dans une zone à faible connectivité
• par exemple, une cuisine ou une usine
• produisant un brouillon pour des annotations à stylo
• imprimant des recettes web à des fins de comptabilité
• fournissant des documents aux personnes handicapées qui ont du mal à utiliser un écran
• collègue qui refuse d'utiliser ce nouveau t'internet un non-sens.

Le Web et les applications ne peuvent pas couvrir toutes les situations, mais imprimer des pages peut être une expérience frustrante:

• le texte peut être trop petit, trop grandes ou trop faibles
• les colonnes peuvent être trop étroites ou les marges de débordement trop grandes
• les sections sont rognées ou disparaissent complètement
• l'encre est gaspillée sur des arrière-plans et des images colorés inutiles

Les développeurs peuvent préconiser l'accessibilité du Web, mais peu de gens se souviennent de rendre le document imprimé accessible.

Conversion de médias réactifs et continus en papier pagonné de n'importe quelle taille et l'orientation peut être difficile. Toutefois, le contrôle d'impression CSS est possible depuis de nombreuses années et une feuille de style de base peut être remplie en quelques heures. Les sections suivantes décrivent des options pratiques et bien prises en charge pour rendre vos pages plus faciles à imprimer.

Feuilles de style d'impression

Print CSS peut être soit:

1. appliqué en plus du style d'écran En prenant vos styles d'écran comme base, les styles d'imprimante remplacent ces paramètres par défaut.
2. Appliqués en tant que styles distincts. L'écran et les styles d'impression sont entièrement séparés. les deux partent des styles par défaut du navigateur.

Le choix dépendra de votre site / application. Personnellement, j'utilise les styles d'écran comme base d'impression pour la plupart des sites Web. Cependant, j'ai utilisé des styles distincts pour les applications avec des résultats radicalement différents – par exemple, un système de réservation de session de conférence affichant une grille à l'écran mais un calendrier chronologique sur papier.

Une feuille de style imprimable peut être ajoutée au HTML [19659027] après la feuille de style standard:

Les styles print.css seront appliqués dans ajout aux styles d'écran lors de l'impression de la page.

Pour séparer les supports d'écran et d'impression , main.css devrait cibler uniquement l'écran:

Alternativement, les styles d'impression peuvent être inclus dans un fichier CSS existant à l'aide des règles @media . Par exemple:

 / * main.css * /
corps {
  marge: 2em;
  couleur: #fff;
  couleur d'arrière-plan: # 000;
}

/ * remplacer les styles lors de l'impression * /
@media print {
  corps {
    marge: 0;
    couleur: # 000;
    couleur d'arrière-plan: #fff;
  }
}

N'importe quel nombre de règles de @media print peut être ajouté, ce qui peut être pratique pour conserver ensemble les styles associés. Les règles d’écran et d’impression peuvent également être séparées, mais c’est un peu plus compliqué:

 / * main.css * /

/ * styles à l'écran * /
@ media screen {
  corps {
    marge: 2em;
    couleur: #fff;
    couleur d'arrière-plan: # 000;
  }
}

/ * styles d'impression * /
@media print {
  corps {
    marge: 0;
    couleur: # 000;
    couleur d'arrière-plan: #fff;
  }
}

Tester la sortie de l'imprimante

Il n'est pas nécessaire de tuer des arbres et d'utiliser une encre extrêmement chère chaque fois que vous voulez tester votre mise en page! Les options suivantes répliquent les styles d'impression à l'écran.

Aperçu avant impression

L'option la plus fiable est l'option d'aperçu avant impression dans votre navigateur. Cela montre comment les sauts de page seront traités à l'aide du format de papier par défaut.

Vous pouvez également enregistrer ou prévisualiser la page en exportant vers un fichier PDF.

Outils de développement

Dans Chrome, ouvrez les outils de développement et sélectionnez Outils supplémentaires puis Rendu dans le menu de l'icône à trois points. Modifiez le Emulate CSS Media à print au bas de ce panneau.

Dans Firefox, ouvrez la barre d'outils Developer (Shift + F2) et entrez . L'émulation d'impression ne reste pas active entre les rafraîchissements de page, mais appuyez sur la touche de curseur vers le haut suivie de pour saisir à nouveau la commande.

Hack Your Media

] pour charger l'imprimante CSS, vous pouvez modifier temporairement l'attribut media à :

Encore une fois, cela ne révélera pas les sauts de page. N'oubliez pas de restaurer l'attribut à media = "print" une fois les tests terminés.

Supprimer les sections inutiles

Avant toute chose, supprimez et réduisez le contenu redondant avec display: aucun (19459018). Les sections inutiles typiques sur papier peuvent inclure des menus de navigation, des images de héros, des en-têtes, des pieds de page, des formulaires, des barres latérales, des widgets de médias sociaux et des blocs publicitaires iframe ):

 / * print.css * /
en-tête, pied de page, de côté, nav, formulaire, iframe, .menu, .hero, .adslot {
  affichage: aucun;
}

Il peut être nécessaire d'utiliser display: none! Important; si les fonctionnalités CSS ou JavaScript affichent / masquent des éléments à la demande. L'utilisation de ! Important n'est normalement pas recommandée mais nous pouvons la justifier ici!

Linéariser la disposition

Cela me fait de la peine de le dire, mais dans n'importe quel navigateur. Cela pourrait éventuellement être abordé mais, pour le moment, réglez tous les blocs de mise en page sur display: block; . Il peut également être nécessaire d'appliquer width: 100%; sur certains éléments pour s'assurer qu'ils couvrent toute la page.

Styling d'imprimante

Un style facile à imprimer peut maintenant être appliqué. Recommandations:

• Assurez-vous d'utiliser du texte foncé sur un arrière-plan blanc.
• Utilisez une police avec empattement, plus facile à lire.
• Ajustez la taille du texte à 12pt ou supérieure. 19659004] Modifier les rembourrages et les marges si nécessaire. Standard cm mm ou en unités peuvent être plus pratiques.

D'autres suggestions incluent…

Adopter des colonnes CSS

Standard A4 ou Le papier à lettre américain peut entraîner des lignes de texte plus longues et moins lisibles. Envisagez d'utiliser les colonnes CSS dans les mises en page imprimées. Par exemple:

 / * print.css * /
article {
  largeur de colonne: 17em;
  écart de colonne: 3em;
}

Dans cet exemple, des colonnes seront créées lorsqu'il y a au moins 37em d'espace horizontal. Il n'y a pas besoin de définir des requêtes média;

Utiliser des bordures au lieu de couleurs d'arrière-plan

Votre modèle peut comporter des sections ou des zones d'appel désignées par des jeux de couleurs plus foncés ou inverses:

Économisez de l'encre en représentant ces éléments avec une bordure:

Supprimer ou inverser des images

images non essentielles. Vous pouvez envisager une valeur par défaut où toutes les images sont masquées sauf si elles ont une classe print :

 / * print.css * /
img, svg {
  affichage: aucun;
}

img.print, svg.print {
  bloc de visualisation;
  largeur max: 100%;
}

Idéalement, les images imprimées devraient utiliser des couleurs sombres sur un fond clair. Il est possible de changer les couleurs SVG incorporées dans HTML mais il y aura des situations plus sombres:

Un filtre CSS peut être utilisé pour inverser et ajuster les couleurs dans la feuille de style d'impression. Par exemple:

 / * print.css * /
img.dark {
  filtre: inverser (100%) teinte rotation (180 degrés) luminosité (120%) contraste (150%);
}

Le résultat:

Ajouter du contenu supplémentaire

Les supports imprimés nécessitent souvent des informations supplémentaires qui ne seraient pas nécessaires à l'écran. La propriété CSS content peut être utilisée pour ajouter du texte à :: avant et :: après pseudo-éléments. Par exemple, affichez l'URL entre parenthèses immédiatement après un lien standard:

 / * print.css * /
a [href^="http"] :: après {
  content: "(" attr (href) ")";
}

Ajoute un message:

 / * print.css * /
main :: après {
  contenu: "Copyright site.com";
  bloc de visualisation;
  text-align: center;
}

Pour des situations plus complexes, envisagez d'utiliser une classe telle que print-only sur des éléments qui ne devraient être visibles qu'une fois imprimés. Par exemple:

 Article mis à jour le 11 juillet 2018. Veuillez consulter https://site.com/page pour la dernière version. 

CSS:

 / * masqué à l'écran * /
.print-only {
  affichage: aucun;
}

@media print {

  / * visible à l'impression * /
  .print-only {
    bloc de visualisation;
  }
}

Remarque: la plupart des navigateurs affichent l'URL et la date / heure actuelle sur l'en-tête et / ou le pied de page de la page imprimée.

Saut de page

Les propriétés CSS3 et break-after vous permet de contrôler le comportement des sauts de page, de colonne ou de région avant et après un élément. Le support est bon bien que Firefox n'autorise que les propriétés déconseillées - mais très proches - page-break-before et page-break-after .

les valeurs suivantes avant et après ont un bon support entre navigateurs:

• auto : la valeur par défaut; une pause est permise mais pas forcée
• éviter : éviter une pause sur la page, la colonne ou la région
• Avoid-page ( pause - * only): éviter un saut de page
• page ( break - * uniquement): forcer un saut de page
• toujours : un alias de page prise en charge dans page-break - *
• à gauche : la page est interrompue et la suivante est une page de gauche

Par exemple, voici comment forcer un saut de page immédiatement avant un en-tête

:

 / * print.css * /
h1 {
  page-break-before: toujours;
  avant-garde: toujours;
}

Les propriétés break-inside et page-break-inside spécifient si un saut de page est autorisé dans un élément. Les valeurs couramment prises en charge:

• auto : la valeur par défaut; une rupture est permise mais pas forcée
• éviter : éviter une rupture intérieure si possible
• Éviter-page ( effraction seulement): éviter un saut de page interne dans la mesure du possible

Pour empêcher les sauts de page survenant dans une table de données:

 / * print.css * /
table {
  page-break-inside: éviter;
  break-in: éviter;
}

La propriété widows spécifie le nombre minimum de lignes dans un bloc qui doit être affiché au sommet d'une page. Imaginez un bloc avec cinq lignes de texte. Le navigateur veut faire un saut de page après la ligne quatre afin que la dernière ligne apparaisse en haut de la page suivante. En plaçant veuves: 3; sur ou avant la deuxième ligne, au moins trois lignes se poursuivent jusqu'à la page suivante.

La propriété orphelins est similaire à veuves sauf qu'il contrôle le nombre minimum de lignes à afficher au bas de la page .

La propriété box-decoration-break contrôle les bordures d'éléments entre les pages. Lorsqu'un élément avec une bordure a un saut de page interne:

• tranche : la valeur par défaut divise la mise en page. La bordure supérieure est affichée sur la première page et la bordure inférieure est illustrée sur la deuxième page.
• clone : réplique la marge, le remplissage et la bordure. Les quatre bordures sont représentées sur les deux pages.

Enfin, Le support paginé CSS (@page) prend en charge le navigateur mais permet de cibler des pages spécifiques. peut être défini:

 / * print.css * /

/ * cible toutes les pages * /
@page {
  marge: 2cm;
}

/ * Ne cible que la première page * /
@page: premier {
  marge supérieure: 6 cm;
}

/ * cible les pages à gauche (paires) uniquement * /
@page: gauche {
  margin-right: 4cm;
}

/ * cible droite (pages impaires) uniquement * /
@page: droit {
  margin-left: 4cm;
}

Les propriétés de saut de page CSS peuvent être placées dans vos styles ou print car elles n'affectent que l'impression.

Malheureusement, le contrôle des sauts de page n'est qu'une suggestion de le navigateur. Il n'y a aucune garantie qu'une rupture soit forcée ou évitée, car la mise en page est limitée aux limites du papier.

Impression des douleurs

Le contrôle de l'impression des supports Web sera toujours limité et les résultats peuvent varier d'un navigateur à l'autre. Cela dit:

• les feuilles de style imprimables peuvent être adaptées à n'importe quel site
• il est peu probable qu'elles affectent ou cassent les fonctionnalités existantes
• les coûts de développement sont minimes.

va ravir les utilisateurs et élever votre site au-dessus des concurrents. Craig est un consultant web britannique indépendant qui a construit sa première page pour IE2.0 en 1995. Depuis, il préconise les standards, l'accessibilité et les meilleures techniques HTML5. . Il a écrit plus de 1000 articles pour SitePoint et vous pouvez le trouver @craigbuckler