Apprenez à utiliser la règle CSS @page pour créer des feuilles de style optimisées pour l'impression, la lisibilité et l'accessibilité sur divers appareils et régions.
CSS @page : Maîtriser la personnalisation des feuilles de style d'impression pour un public mondial
Dans le paysage numérique actuel, il est facile de négliger l'importance des feuilles de style d'impression. Cependant, offrir une version bien formatée et imprimable du contenu de votre site web est crucial pour l'accessibilité et l'expérience utilisateur. Des utilisateurs de divers horizons peuvent préférer lire et interagir avec l'information hors ligne, et une version imprimée correctement stylisée démontre un engagement envers l'inclusivité. Ce guide complet explorera la puissance de la règle CSS @page, vous permettant de créer des mises en page d'impression personnalisées qui répondent à un public mondial.
Pourquoi les feuilles de style d'impression sont-elles importantes ?
Bien que nous vivions à l'ère du numérique, le besoin de documents imprimés n'a pas disparu. Considérez ces scénarios :
- Ressources éducatives : Les étudiants préfèrent souvent les supports imprimés pour étudier et prendre des notes.
- Documents juridiques : Les contrats, accords et informations légales nécessitent fréquemment des copies imprimées.
- Recettes : De nombreux cuisiniers préfèrent avoir une recette imprimée dans la cuisine, évitant ainsi le désagrément de faire défiler un écran avec les mains sales.
- Informations de voyage : Les voyageurs impriment parfois des cartes, des itinéraires et des documents essentiels pour un accès hors ligne, en particulier dans les zones à connectivité internet limitée.
- Accessibilité : Certains utilisateurs peuvent avoir des déficiences visuelles qui facilitent la lecture de texte imprimé avec des tailles de police et un contraste ajustés.
Une feuille de style d'impression dédiée garantit que votre contenu est présenté dans le meilleur format possible pour l'impression, quel que soit l'appareil ou le navigateur de l'utilisateur. Sans cela, les utilisateurs pourraient imprimer le site web complet, y compris la navigation, les barres latérales et d'autres éléments non pertinents dans un document imprimé. Cela gaspille de l'encre, du papier et peut aboutir à un résultat encombré et illisible.
Présentation de la règle CSS @page
La règle @page en CSS vous permet de contrôler la mise en page et l'apparence des pages imprimées. Elle fournit un mécanisme pour définir les marges, le format de la page, l'orientation et d'autres propriétés spécifiques au support d'impression. La règle @page est placée dans un bloc @media print pour s'assurer que ses styles ne sont appliqués qu'au moment de l'impression.
Voici la syntaxe de base :
@media print {
@page {
/* Les propriétés CSS pour les styles d'impression vont ici */
}
}
Propriétés essentielles de @page
La règle @page offre une gamme de propriétés pour personnaliser votre mise en page d'impression. Explorons quelques-unes des plus importantes :
1. Size
La propriété size définit les dimensions de la page imprimée. Les valeurs courantes incluent :
auto: Le navigateur détermine le format de la page en fonction des paramètres de l'imprimante.A4: Le format de page standard utilisé dans la plupart des pays (210 mm x 297 mm).Letter: Le format de page standard utilisé aux États-Unis et au Canada (8,5 pouces x 11 pouces).Legal: Un format de page plus grand souvent utilisé pour les documents juridiques (8,5 pouces x 14 pouces).- Dimensions personnalisées : Vous pouvez également spécifier la largeur et la hauteur de la page en utilisant des unités comme
px,cmouin. Par exemple :size: 20cm 30cm;
Exemple : DĂ©finir le format de page sur A4 :
@media print {
@page {
size: A4;
}
}
Considérations mondiales : N'oubliez pas que les standards de format de page varient à travers le monde. Bien que le format A4 soit dominant dans la plupart des régions, le format Letter est la norme en Amérique du Nord. Envisagez de fournir des options permettant aux utilisateurs de sélectionner leur format de page préféré ou d'utiliser auto pour se fier aux paramètres de l'imprimante.
2. Margin
La propriété margin contrôle l'espace entre le contenu et les bords de la page. Vous pouvez définir des marges individuelles pour le haut, la droite, le bas et la gauche de la page, ou utiliser une notation abrégée.
margin: 1in;: Définit toutes les marges à 1 pouce.margin: 1in 2in;: Définit les marges supérieure et inférieure à 1 pouce, et les marges gauche et droite à 2 pouces.margin: 1in 2in 3in;: Définit la marge supérieure à 1 pouce, les marges gauche et droite à 2 pouces, et la marge inférieure à 3 pouces.margin: 1in 2in 3in 4in;: Définit respectivement les marges supérieure, droite, inférieure et gauche à 1 pouce, 2 pouces, 3 pouces et 4 pouces.
Exemple : DĂ©finir les marges pour le papier A4 :
@media print {
@page {
size: A4;
margin: 1cm;
}
}
Considérations mondiales : La taille des marges peut affecter la lisibilité, en particulier pour les langues avec des mots longs ou des écritures complexes. Assurez-vous que les marges sont suffisantes pour éviter que le texte ne soit coupé ou ne paraisse à l'étroit.
3. Orientation
La propriété orientation spécifie si la page doit être imprimée en mode portrait (vertical) ou paysage (horizontal).
portrait: L'orientation par défaut, avec la page plus haute que large.landscape: La page est plus large que haute.
Exemple : Forcer l'orientation paysage :
@media print {
@page {
size: A4 landscape;
}
}
Considérations mondiales : L'orientation paysage peut être utile pour afficher de larges tableaux, graphiques ou images. Tenez compte de la disposition du contenu et des besoins de l'utilisateur lors du choix de l'orientation.
4. Marks
La propriété marks ajoute des traits de coupe et/ou des repères de calage à la page imprimée. Ceux-ci sont principalement utilisés dans l'impression professionnelle pour couper et aligner les pages.
crop: Ajoute des traits de coupe aux coins de la page, indiquant où couper le papier.cross: Ajoute des repères de calage (petites croix) pour aider à aligner les différentes séparations de couleurs.none: Aucun repère n'est ajouté.
Exemple : Ajouter des traits de coupe :
@media print {
@page {
size: A4;
marks: crop;
}
}
Considérations mondiales : La propriété marks est principalement pertinente pour l'impression professionnelle et peut ne pas être nécessaire pour le contenu web typique imprimé sur des imprimantes domestiques ou de bureau.
5. Bleed
La propriété bleed spécifie la quantité de contenu qui s'étend au-delà des bords de la page. Ceci est utilisé pour s'assurer que les couleurs ou les images s'étendent jusqu'au bord même de la page imprimée après sa coupe.
Exemple : DĂ©finir une zone de fond perdu de 5 mm :
@media print {
@page {
size: A4;
bleed: 5mm;
}
}
Considérations mondiales : Comme marks, bleed est principalement utilisé dans des contextes d'impression professionnels. Il est important de concevoir votre contenu en tenant compte du fond perdu si vous avez l'intention de l'utiliser.
Au-delà de @page : Améliorer les styles d'impression
Bien que la règle @page permette de contrôler la mise en page de la page, vous devrez également appliquer d'autres styles CSS pour optimiser le contenu pour l'impression. Voici quelques techniques essentielles :
1. Masquer les éléments non nécessaires
Supprimez les éléments qui ne sont pas pertinents dans un document imprimé, tels que les menus de navigation, les barres latérales, les publicités et les widgets de réseaux sociaux. Utilisez la propriété display: none; dans le bloc @media print pour masquer ces éléments.
Exemple : Masquer la navigation et la barre latérale :
@media print {
nav, aside {
display: none;
}
}
2. Optimiser la lisibilité du texte
Ajustez les tailles de police, les hauteurs de ligne et les couleurs pour améliorer la lisibilité sur papier. Utilisez une police claire et lisible, comme Arial, Helvetica ou Times New Roman.
Exemple : Ajuster les styles de texte :
@media print {
body {
font-family: "Times New Roman", serif;
font-size: 12pt;
line-height: 1.5;
color: #000;
}
a {
color: inherit; /* Supprimer la couleur du lien */
text-decoration: none; /* Supprimer les soulignements */
}
}
Considérations mondiales : Les choix de polices doivent prendre en charge les jeux de caractères utilisés dans différentes langues. Assurez-vous que la police sélectionnée inclut des glyphes pour tous les caractères de votre contenu. Par exemple, si vous utilisez des caractères chinois, japonais ou coréens, choisissez une police spécialement conçue pour ces langues.
3. GĂ©rer les images et les graphiques
Optimisez les images et les graphiques pour l'impression. Envisagez d'utiliser des versions en niveaux de gris des images pour économiser de l'encre. Si les images sont essentielles, assurez-vous qu'elles ont une résolution suffisamment élevée pour être imprimées clairement.
Exemple : Convertir les images en niveaux de gris :
@media print {
img {
filter: grayscale(100%);
}
}
Considérations mondiales : Soyez attentif aux sensibilités culturelles lors de l'utilisation d'images. Assurez-vous que les images sont appropriées pour un public diversifié et évitez toute imagerie qui pourrait être offensante ou mal interprétée.
4. Traiter les liens
Par défaut, les navigateurs peuvent ne pas imprimer les URL associées aux hyperliens. Vous pouvez utiliser CSS pour afficher les URL à côté des liens.
Exemple : Afficher les URL :
@media print {
a[href]:after {
content: " (" attr(href) ")";
}
}
5. GĂ©rer les tableaux
Assurez-vous que les tableaux sont correctement formatés pour l'impression. Évitez les tableaux larges qui pourraient être coupés. Utilisez CSS pour contrôler les bordures, le remplissage et les tailles de police des tableaux.
Exemple : Styler les tableaux pour l'impression :
@media print {
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 5px;
}
}
Considérations mondiales : Certaines langues utilisent une direction de texte de droite à gauche. Assurez-vous que vos styles de tableau gèrent correctement les mises en page de droite à gauche.
6. Éviter les couleurs inutiles
L'impression en couleur consomme plus d'encre. Envisagez d'utiliser une palette de couleurs monochrome pour les feuilles de style d'impression afin d'économiser de l'encre et d'améliorer la lisibilité. Vous pouvez y parvenir en définissant la couleur du texte sur noir et la couleur de fond sur blanc (ou un gris très clair).
Exemple : DĂ©finir les couleurs pour l'impression :
@media print {
body {
color: #000;
background-color: #fff;
}
}
7. Sauts de page
Utilisez les propriétés page-break-before, page-break-after et page-break-inside pour contrôler où les sauts de page se produisent. Ces propriétés peuvent aider à empêcher que les titres ne soient séparés de leur contenu ou que les tableaux ne soient coupés sur plusieurs pages.
page-break-before: always;: Force un saut de page avant l'élément.page-break-after: always;: Force un saut de page après l'élément.page-break-inside: avoid;: Tente d'éviter un saut de page à l'intérieur de l'élément.
Exemple : Empêcher les sauts de page à l'intérieur des tableaux et forcer un saut de page avant chaque nouveau chapitre :
@media print {
table {
page-break-inside: avoid;
}
h2 {
page-break-before: always;
}
}
Implémenter les feuilles de style d'impression
Il existe deux manières principales d'implémenter les feuilles de style d'impression :
1. Feuille de style externe
Créez un fichier CSS distinct spécifiquement pour les styles d'impression (par exemple, print.css) et liez-le à votre document HTML en utilisant la balise <link> avec l'attribut media="print".
<link rel="stylesheet" href="print.css" media="print">
Cette approche maintient vos styles d'impression séparés de vos styles d'écran, rendant votre code plus organisé et maintenable.
2. Styles en ligne
Intégrez vos styles d'impression directement dans le document HTML en utilisant la balise <style> à l'intérieur d'un bloc @media print.
<style>
@media print {
/* Les styles d'impression vont ici */
}
</style>
Cette approche convient aux petits projets ou lorsque vous n'avez besoin que de quelques styles d'impression simples. Cependant, elle peut rendre votre document HTML plus encombré si vous avez un grand nombre de styles d'impression.
Tester vos styles d'impression
Après avoir implémenté votre feuille de style d'impression, il est crucial de la tester minutieusement pour vous assurer que votre contenu s'imprime correctement.
- Utilisez l'aperçu avant impression de votre navigateur : La plupart des navigateurs disposent d'une fonction d'aperçu avant impression intégrée qui vous permet de voir à quoi ressemblera votre page une fois imprimée.
- Imprimer en PDF : Utilisez l'option d'impression en PDF de votre navigateur pour créer un fichier PDF de votre page. Cela vous permet d'examiner de plus près le résultat imprimé et de le partager avec d'autres.
- Testez sur différents navigateurs et appareils : Les styles d'impression peuvent varier légèrement entre les différents navigateurs et appareils. Testez votre feuille de style d'impression sur plusieurs navigateurs et appareils pour garantir la cohérence.
- Obtenez des retours : Demandez à des utilisateurs de divers horizons d'imprimer votre contenu et de fournir des commentaires sur la lisibilité, la mise en page et l'expérience globale.
Considérations sur l'accessibilité
Lors de la création de feuilles de style d'impression, il est essentiel de prendre en compte l'accessibilité pour les utilisateurs handicapés. Voici quelques conseils :
- Fournir un contraste suffisant : Assurez-vous qu'il y a un contraste suffisant entre le texte et les couleurs de fond pour rendre le texte facile Ă lire.
- Utiliser des polices lisibles : Choisissez des polices faciles à lire pour les utilisateurs ayant des déficiences visuelles.
- Évitez d'utiliser la couleur comme seul moyen de transmettre l'information : Les utilisateurs daltoniens peuvent ne pas être en mesure de distinguer certaines couleurs. Utilisez des méthodes alternatives, telles que des étiquettes textuelles ou des symboles, pour transmettre l'information.
- Fournir un texte alternatif pour les images : Incluez des attributs
altpour toutes les images afin de fournir un texte alternatif pour les utilisateurs qui ne peuvent pas voir les images.
Conclusion
Maîtriser la personnalisation des feuilles de style d'impression avec la règle CSS @page est crucial pour offrir une expérience utilisateur positive et garantir l'accessibilité pour un public mondial. En comprenant les différentes propriétés de @page et en appliquant les meilleures pratiques pour le stylisme d'impression, vous pouvez créer des versions imprimables de votre contenu web qui sont optimisées pour la lisibilité, la convivialité et l'efficacité de l'encre. N'oubliez pas de tester minutieusement vos feuilles de style d'impression et de prendre en compte l'accessibilité pour tous les utilisateurs.
En mettant en œuvre ces stratégies, vous démontrez un engagement à fournir une expérience complète et inclusive pour tous les utilisateurs, quelle que soit leur méthode préférée d'accès à l'information. Cela améliore en fin de compte la convivialité de votre site web et renforce la réputation de votre marque à l'échelle mondiale.