Χρήση CSS για τη μορφοποίηση εγγράφων για εκτύπωση

Χρήση CSS για τη μορφοποίηση εγγράφων για εκτύπωση

Εάν έχετε εκτυπώσει ποτέ κρατήσεις εισιτηρίων ή οδηγίες για ένα ξενοδοχείο από το διαδίκτυο, πιθανώς να μην έχετε εντυπωσιαστεί με τα αποτελέσματα. Επομένως, μπορεί να αγνοείτε ότι τα τυπωμένα έγγραφα μπορούν να διαμορφωθούν με τον ίδιο τρόπο όπως μπορούν στην οθόνη, χρησιμοποιώντας Cascading Style Sheets (CSS).





Διαχωρισμός ανησυχιών

Ένα βασικό όφελος του CSS είναι ο διαχωρισμός του περιεχομένου από την παρουσίαση. Με τους πιο απλούς όρους, αυτό σημαίνει αντί για πολύ ντεμοντέ στιλιστική σήμανση όπως:



Heading

Χρησιμοποιούμε σημασιολογική σήμανση:






Όχι μόνο είναι πολύ πιο καθαρό, σημαίνει επίσης ότι η παρουσίασή μας διαχωρίζεται από το περιεχόμενό μας. Τα προγράμματα περιήγησης αποδίδουν η1 στοιχεία ως μεγάλο, έντονο κείμενο από προεπιλογή, αλλά μπορούμε να το αλλάξουμε ανά πάσα στιγμή με ένα φύλλο στυλ:

h1 { font-weight: normal; }

Συγκεντρώνοντας αυτές τις δηλώσεις στυλ σε ξεχωριστό αρχείο και αναφέροντας αυτό το αρχείο από το έγγραφο HTML, μπορούμε να χρησιμοποιήσουμε ακόμη καλύτερα τον διαχωρισμό. Το φύλλο στυλ μπορεί να επαναχρησιμοποιηθεί και μπορούμε να αλλάξουμε το εν λόγω αρχείο ανά πάσα στιγμή για να ενημερώσουμε τη μορφοποίηση σε κάθε έγγραφο που το χρησιμοποιεί.



Περιλαμβάνει ένα φύλλο στυλ εκτύπωσης

Με παρόμοιο τρόπο με τη συμπερίληψη ενός φύλλου στυλ οθόνης, μπορούμε να καθορίσουμε ένα φύλλο στυλ για εκτύπωση. Συνήθως περιλαμβάνεται ένα φύλλο στυλ οθόνης ως εξής:


Ωστόσο, ένα πρόσθετο χαρακτηριστικό, τα μισα , επιτρέπει τη στόχευση βάσει του πλαισίου στο οποίο αποδίδεται το έγγραφο. Από προεπιλογή, το προηγούμενο στοιχείο ισοδυναμεί με:




Αυτό σημαίνει ότι το φύλλο στυλ θα εφαρμοστεί για οποιοδήποτε μέσο εκδίδεται το έγγραφο. Ωστόσο, το χαρακτηριστικό μέσων μπορεί επίσης να λάβει τιμές εκτύπωσης και οθόνης:


Σε αυτό το παράδειγμα, το print.css Το φύλλο στυλ θα χρησιμοποιηθεί μόνο όταν εκτυπωθεί το έγγραφο. Αυτός είναι ένας πολύ χρήσιμος μηχανισμός. Μπορούμε να συγκεντρώσουμε όλα τα κοινά στυλ (ίσως οικογένεια γραμματοσειρών ή διάσταση γραμμών) σε ένα φύλλο στυλ που ισχύει για όλα τα μέσα και μορφοποίηση συγκεκριμένων μέσων σε μεμονωμένα φύλλα στυλ. Και πάλι, αυτή είναι μια άλλη χρήση του διαχωρισμού των ανησυχιών.



Ορισμένα παραδείγματα διακηρύξεων στυλ

Ένα καθαρό υπόβαθρο

Σίγουρα δεν θέλετε να σπαταλήσετε την εκτύπωση μελανιού εκτυπώνοντας ένα πολύχρωμο φόντο ή μια εικόνα φόντου. Ξεκινήστε με επαναφορά τυχόν προεπιλογών για αυτές τις τιμές που ενδέχεται να έχουν οριστεί στο έγγραφό σας:

body {
background: white;
color: black;
}

Σως θελήσετε επίσης να αποτρέψετε την εκτύπωση οποιωνδήποτε εικόνων φόντου - αυτές θα πρέπει να είναι διακοσμητικές και, ως εκ τούτου, να μην αποτελούν απαραίτητο μέρος του περιεχομένου σας:

* {
background-image: none !important;
}

Σχετίζεται με: Πώς να ορίσετε μια εικόνα φόντου στο CSS

πώς να βρείτε φωτογραφίες κάποιου γνωστού σας στο διαδίκτυο

Έλεγχος περιθωρίων

Ένα άλλο προφανές σημείο που πρέπει να λάβετε υπόψη σχετικά με την εκτύπωση είναι το περιθώριο σελίδας. Ενώ το CSS παρέχει ένα μέσο ρύθμισης μεγέθους περιθωρίου, πρέπει να έχετε κατά νου ότι το πρόγραμμα περιήγησης και ο εκτυπωτής σας μπορεί επίσης να επηρεάσουν τις ίδιες τις ρυθμίσεις περιθωρίου.

Για παράδειγμα, στο παράθυρο διαλόγου εκτύπωσης του Chrome, υπάρχει μια ρύθμιση περιθωρίου που περιλαμβάνει τιμές συμπεριλαμβανομένων κανένας και έθιμο που θα παρακάμψει οτιδήποτε καθορίζεται μέσω CSS:

Για το λόγο αυτό, συνιστάται να αφήνετε τις αποφάσεις περιθωρίου στον αναγνώστη στις δημόσιες ιστοσελίδες. Ωστόσο, για προσωπική χρήση ή για τη δημιουργία μιας προεπιλεγμένης διάταξης, μπορεί να είναι κατάλληλη η ρύθμιση περιθωρίων εκτύπωσης μέσω CSS. ο @σελίδα ο κανόνας επιτρέπει τον καθορισμό περιθωρίων και πρέπει να χρησιμοποιείται ως εξής:

@page {
margin: 2cm;
}

Το CSS έχει επίσης τη δυνατότητα για πιο εξελιγμένες διατάξεις εκτύπωσης, όπως μεταβολή του περιθωρίου ανάλογα με το αν η σελίδα είναι μονός αριθμός (δεξιά), ζυγός αριθμός (αριστερά) ή εξώφυλλο.

απομακρυσμένη επιφάνεια εργασίας από τα Windows στο Linux

Δυστυχώς, αυτό υποστηρίζεται ελάχιστα - ειδικά η επιλογή της σελίδας εξωφύλλου - αλλά μπορεί να χρησιμοποιηθεί σε ελάχιστο βαθμό. Τα ακόλουθα στυλ παράγουν σελίδες με ελαφρώς μεγαλύτερα κάτω περιθώρια από το επάνω και ελαφρώς μεγαλύτερα περιθώρια στο εξωτερικό άκρο της σελίδας από τη ράχη:

@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}

Απόκρυψη άσχετου περιεχομένου

Όλο το περιεχόμενο δεν θα είναι κατάλληλο για μια έντυπη έκδοση του εγγράφου σας. Εάν η σελίδα σας περιλαμβάνει πλοήγηση σε banner, διαφημίσεις ή πλαϊνή γραμμή, ίσως θέλετε να αποτρέψετε την εμφάνιση αυτών των λεπτομερειών στην έντυπη έκδοση, για παράδειγμα:

#contents, div.ad { display: none; }

Οι υπερσύνδεσμοι προφανώς δεν σχετίζονται με το έντυπο υλικό, οπότε πιθανότατα θα θέλετε να καταργήσετε τυχόν στυλ που τους διαφοροποιούν από το περιβάλλον κείμενο:

a { text-decoration: none; color: inherit; }

Ωστόσο, μπορεί ακόμα να θέλετε οι αναγνώστες να έχουν πρόσβαση στις αρχικές διευθύνσεις URL και μια απλή λύση είναι η αυτόματη εισαγωγή τους μετά το συνδεδεμένο κείμενο:

a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}

Αυτό το CSS δίνει αποτελέσματα όπως τα ακόλουθα:

α [href]: μετά στοχεύει συγκεκριμένα τη θέση μετά ( :μετά ) κάθε στοιχείο συνδέσμου ( προς το ) που έχει πραγματικά μια διεύθυνση URL ( [href] ). ο περιεχόμενο η δήλωση εδώ εισάγει την τιμή του href χαρακτηριστικό μεταξύ παρενθέσεων. Λάβετε υπόψη ότι μπορούν να εφαρμοστούν άλλοι κανόνες στυλ για τον έλεγχο της εμφάνισης του δημιουργούμενου περιεχομένου.

Χειρισμός σπασίματος σελίδας

Για να αποφύγετε τα σπασίματα σελίδων που αφήνουν μεμονωμένο περιεχόμενο ή το σπάσετε αμήχανα στη μέση, χρησιμοποιήστε τις ιδιότητες σπάσιμο σελίδας: page-break-before , σελίδα-σπάσιμο μετά και σελίδα-σπάσιμο-μέσα Το Για παράδειγμα:

table { page-break-inside: avoid; }

Αυτό θα βοηθήσει στην αποτροπή των πινάκων από πολλές σελίδες, εφόσον καμία δεν είναι μεγαλύτερη από μία σελίδα. Ομοίως:

h1, h2 { page-break-before: always; }

Αυτό σημαίνει ότι τέτοιες επικεφαλίδες ξεκινούν πάντα μια νέα σελίδα. Ωστόσο, μπορεί να προκαλέσει προβλήματα εάν ακολουθήσετε αμέσως το h1 της σελίδας σας με h2, αφού το h1 θα καταλήξει σε μια σελίδα μόνο του. Για να αποφευχθεί αυτό, απλώς ακυρώστε τη διακοπή σελίδας χρησιμοποιώντας έναν επιλογέα που στοχεύει τη συγκεκριμένη παρουσία, για παράδειγμα:

η ομάδα ή ο πόρος δεν είναι στη σωστή κατάσταση εικονικού δρομολογητή
h1 + h2 { page-break-before: avoid; }

Προβολή στυλ εκτύπωσης

Σε όλες τις περιπτώσεις, το πρόγραμμα περιήγησης και το λειτουργικό σας σύστημα θα πρέπει να παρέχουν μια δυνατότητα προεπισκόπησης εκτύπωσης, συχνά ως μέρος του τυπικού διαλόγου εκτύπωσης.

Το πρόγραμμα περιήγησης Chrome διευκολύνει τον έλεγχο και ακόμη και τον εντοπισμό σφαλμάτων στα στυλ εκτύπωσης μέσω των Εργαλείων προγραμματιστή, όπως αποδεικνύεται από αυτό το παράδειγμα που δείχνει ένα βιογραφικό σημείωμα με ένα φύλλο στυλ εκτύπωσης. Αρχικά, ανοίξτε το κύριο μενού και επιλέξτε Περισσότερα Εργαλεία ακολουθούμενο από το Εργαλεία προγραμματιστή επιλογή:

Από το νέο πλαίσιο που εμφανίζεται, επιλέξτε Μενού , τότε Περισσότερα εργαλεία , ακολουθούμενη από Απόδοση :

Στη συνέχεια, μετακινηθείτε προς τα κάτω στο Εξομοιώστε τον τύπο μέσων CSS σύνθεση. Το αναπτυσσόμενο μενού σάς επιτρέπει να κάνετε εναλλαγή μεταξύ των προβολών εκτύπωσης και οθόνης του εγγράφου σας:

Κατά την εξομοίωση του φύλλου στυλ εκτύπωσης, το πρότυπο Στυλ περιήγησης είναι διαθέσιμο για να επιθεωρήσει και να τροποποιήσει τους κανόνες του ζωντανού στυλ. Λάβετε υπόψη ότι η εξομοίωση εξόδου εκτύπωσης σε μια οθόνη δεν είναι ακόμα 100% ακριβής. Το πρόγραμμα περιήγησης δεν γνωρίζει τίποτα για το μέγεθος του χαρτιού και το @σελίδα ο κανόνας δεν μπορεί να μιμηθεί.

Εκτύπωση σε PDF

Ένα εύχρηστο χαρακτηριστικό των σύγχρονων λειτουργικών συστημάτων είναι η δυνατότητα εκτύπωσης σε αρχείο PDF. Στην πραγματικότητα, οτιδήποτε μπορείτε να εκτυπώσετε μπορεί, αντί αυτού, να σταλεί σε ένα αρχείο PDF - δεν αποτελεί πραγματική έκπληξη αφού ένα αρχείο PDF υποτίθεται ότι αντιπροσωπεύει ένα τυπωμένο έγγραφο, τελικά.

Αυτό καθιστά το HTML, σε συνδυασμό με ένα φύλλο στυλ εκτύπωσης, ένα εξαιρετικό μέσο για τη δημιουργία ενός εγγράφου υψηλής ποιότητας που μπορεί να αποσταλεί ως συνημμένο, καθώς και να εκτυπωθεί.

Μπορείτε να χρησιμοποιήσετε ένα φύλλο στυλ εκτύπωσης για να δημιουργήσετε έγγραφα ποιότητας, συμπεριλαμβανομένων οτιδήποτε από το βιογραφικό σας έως συνταγές ή ανακοινώσεις εκδηλώσεων. Οι ιστοσελίδες συνήθως φαίνονται άσχημες και περιέχουν ανεπιθύμητες λεπτομέρειες όταν εκτυπώνονται, αλλά ένας μικρός αριθμός τροποποιήσεων στυλ μπορεί να βελτιώσει δραματικά τα αποτελέσματα εκτύπωσης. Η αποθήκευση των τελικών αποτελεσμάτων ως PDF είναι ένας γρήγορος τρόπος δημιουργίας ελκυστικών, επαγγελματικών εγγράφων.

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Πώς να εκτυπώσετε ιστοσελίδες σε PDF με το Microsoft Edge

Έχετε συναντήσει ποτέ ένα ενδιαφέρον άρθρο που θέλετε να αποθηκεύσετε για αργότερα; Λοιπόν, μπορείτε να αποθηκεύσετε ως PDF με το Edge σε τρία εύκολα βήματα.

Διαβάστε Επόμενο Σχετικά θέματα
  • Προγραμματισμός
  • Εκτύπωση
  • CSS
Σχετικά με τον Συγγραφέα Μπόμπι Τζακ(Δημοσιεύθηκαν 58 άρθρα)

Ο Bobby είναι λάτρης της τεχνολογίας που εργάστηκε ως προγραμματιστής λογισμικού για περισσότερες από δύο δεκαετίες. Είναι παθιασμένος με το gaming, εργάζεται ως Reviews Editor στο Switch Player Magazine και είναι βυθισμένος σε όλες τις πτυχές της διαδικτυακής δημοσίευσης και ανάπτυξης ιστού.

Περισσότερα από τον Bobby Jack

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή