Contexte et motivation

En testant l’impression de son propre blog, l’auteur a observé que le texte apparaissait deux tailles trop grandes, que l’en‑tête était visuellement dégradé et que les liens bleus devenaient gris très pâle sur une impression en noir et blanc. Ces constats, issus d’une simple combinaison CTRL‑P, ont motivé la mise en place d’une feuille de style dédiée à l’impression afin de rendre le contenu lisible et professionnel.

Le besoin d’une version imprimable n’est pas limité à l’usage personnel ; tout site essentiellement textuel peut bénéficier d’une adaptation qui respecte les standards typographiques (12 pt pour le corps de texte) et les contraintes physiques du papier, comme le souligne l’auteur en évoquant la « gentillesse » du développeur envers ses utilisateurs.

Mise en œuvre du CSS d’impression

Le code suivant, extrait du blog, montre l’utilisation du sélecteur @media print pour surcharger les styles à l’impression. Les classes .noPrint et .onlyPrint permettent respectivement de masquer des éléments (ex. l’en‑tête) et d’afficher des blocs réservés à la version papier (ex. l’attribution de l’auteur). Les tailles de police sont explicitement définies : p, ol {font-size:12pt;}, h1 {font-size:16pt;}, etc., assurant une hiérarchie visuelle conforme aux pratiques d’édition.

.onlyPrint {
  display: none;
}
@media print {
  .noPrint {
    display: none;
  }
  .onlyPrint {
    display: inline;
  }
  p,
  ol {
    font-size: 12pt;
  }
  h3, h4 {
    font-size: 13pt;
  }
  h2 {
    font-size: 14pt;
  }
  h1 {
    font-size: 16pt;
  }
  .giallo {
    border: 3px solid black;
  }
  .giallo-l {
    font-size: 11pt;
  }
  a {
    color: black !important;
  }
}

Le sélecteur a {color:black !important;} neutralise la couleur bleue des liens, évitant ainsi le rendu gris‑bleu qui nuit à la lisibilité. La classe .giallo ajoute une bordure noire aux blocs de code, tandis que .giallo-l réduit leur taille à 11 pt, tentant de limiter l’encombrement sur la page.

Analyse des limites et bonnes pratiques

Malgré ces ajustements, l’auteur signale que les blocs de code restent « les plus laids », notamment parce qu’ils ne se fragmentent pas automatiquement aux limites de page. Le CSS standard ne propose pas de mécanisme natif pour forcer la rupture de page à l’intérieur d’un <pre> ou d’un <code>, ce qui peut entraîner des coupures incomplètes ou des espaces blancs excessifs. Une solution consiste à insérer page-break-inside: avoid; sur les conteneurs, mais cela reste limité par le moteur d’impression du navigateur.

De plus, la simple suppression de l’en‑tête via .noPrint ne garantit pas la cohérence du flux de texte ; les marges et les sauts de page doivent être contrôlés avec @page {margin: …} pour éviter les débordements. L’absence de tests automatisés sur différents pilotes d’imprimante rend la robustesse du rendu incertaine, surtout lorsqu’on considère la variété des résolutions et des capacités de gestion du noir et blanc.

Perspectives d’évolution

Pour généraliser l’impression de sites web, les développeurs pourraient adopter des frameworks CSS dédiés, comme Print.css, qui offrent des variables de taille et des mixins pour harmoniser les typographies. L’intégration de CSS Paged Media (ex. break-before, break-after) permettrait de mieux contrôler la pagination, notamment pour les longs articles ou les rapports techniques.

Enfin, la communauté pourrait enrichir les spécifications en introduisant des propriétés spécifiques aux blocs de code, afin de garantir une rupture de page fiable et une mise en forme adaptée aux environnements d’impression. En attendant, l’approche présentée par l’auteur constitue un point de départ pragmatique, démontrant que quelques règles CSS ciblées peuvent transformer une impression brute en un document lisible et professionnel.