Πώς μπορείτε να βελτιστοποιήσετε τις σελίδες για…

Για τη βελτιστοποίηση των σελίδων για εκτύπωση, χρησιμοποιώ το @media print στο CSS. Σε αυτό, κρύβω στοιχεία που δεν χρειάζονται κατά την εκτύπωση (πλοήγηση, υποσέλιδα, πλαϊνές στήλες), αλλάζω τα στυλ για καλύτερη αναγνωσιμότητα (μέγεθος γραμματοσειράς, διαστήματα), αφαιρώ εικόνες φόντου και σκιές. Προσθέτω επίσης διακοπές σελίδων με break-before, break-after και ελέγχω την προσανατολισμό με @page. Μπορώ να χρησιμοποιήσω ειδικές κλάσεις, όπως .no-print, για γρήγορο απόκρυψη στοιχείων.

Ορίστε μερικά παραδείγματα:

/* Απόκρυψη στοιχείων που δεν χρειάζονται κατά την εκτύπωση */
@media print {
  nav, footer, aside {
    display: none;
  }
}

/* Βελτίωση της εμφάνισης για καλύτερη αναγνωσιμότητα */
@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000; /* Μαύρο κείμενο για καλύτερη αντίθεση */
  }
  a {
    color: #000; /* Αφαίρεση του μπλε χρώματος των συνδέσμων */
    text-decoration: none;
  }
  /* Προσθήκη URL συνδέσμων μετά το κείμενο */
  a[href]:after {
    content: " (" attr(href) ")";
  }
  /* Απόκρυψη εικόνων φόντου */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* Έλεγχος διακοπών σελίδας */
@media print {
  h2 {
    break-before: page; /* Ξεκινά νέα σελίδα πριν από κάθε h2 */
  }
}

/* Ορισμός προσανατολισμού σελίδας */
@page {
  size: A4 portrait; /* ή landscape */
  margin: 1cm; /* Περιθώρια */
}

Για πιο προχωρημένες προσαρμογές ή προσθήκη πληροφοριών (π.χ. αριθμοί σελίδων, κεφαλίδες και υποσέλιδα), μπορεί να χρησιμοποιηθεί η οδηγία @page. Επιπλέον, ορισμένα ειδικά στυλ (όπως position: fixed) μπορεί να συμπεριφέρονται απρόβλεπτα κατά την εκτύπωση και να απαιτούν ξεχωριστούς κανόνες για @media print.

Είναι σημαντικό να δοκιμάσετε το αποτέλεσμα της εκτύπωσης σε διαφορετικούς browsers.

Πώς μπορείτε να βελτιστοποιήσετε τις σελίδες για εκτύπωση;