10 Συμβουλές για καλύτερα φύλλα στυλ εκτύπωσης
Τα φύλλα στυλ εκτύπωσης έχουν ξεχαστεί κάπως, και όμως παραμένουν σημαντικά τα ίδια. Πολλοί άνθρωποι εκτυπώνουν άρθρα που διαβάζουν ενώ ταξιδεύουν ή όταν δεν έχουν πρόσβαση στο Διαδίκτυο.
Τα φύλλα στυλ εκτύπωσης έχουν συγκεκριμένα οφέλη . Για παράδειγμα, η ανάγνωση σε χαρτί είναι λιγότερο κουραστική στα μάτια από την ανάγνωση στην οθόνη.
Επίσης, τα ακόλουθα μαθήματα είναι ευκολότερα αν έχετε ένα δίπλα σας, με τον επεξεργαστή κωδικων σας να ανοίγει στην οθόνη. Με αυτό τον τρόπο, δεν χρειάζεται να αλλάζετε τα παράθυρα κάθε φορά για να δείτε κάτι επάνω.
Σε αυτό το άρθρο θα επισημάνω 10 εύκολες συμβουλές που θα σας βοηθήσουν να δημιουργήσετε καλύτερα φύλλα στυλ εκτύπωσης .
Σε περίπτωση που έχετε ξεχάσει, μπορείτε να δημιουργήσετε ένα φύλλο στυλ εκτύπωσης:
ο media="print" χαρακτηριστικό εξασφαλίζει ότι οι χρήστες δεν βλέπουν κανένα από τα στυλ που ορίζονται στο αρχείο print.css .
Απαιτείται κάποια προσοχή, αν: εάν το κύριο φύλλο στυλ σας δεν έχει ιδιότητα μέσου, το φύλλο στυλ εκτύπωσης θα κληρονομήσει το ύφος του. Για να τα διαχωρίσετε, ορίστε το κύριο φύλλο στυλ σας ως εξής:
Ακολουθούν 10 συμβουλές για να ξεκινήσετε με το φύλλο στυλ εκτύπωσης.
1. Αφαιρέστε την Πλοήγηση
Ποια είναι η κύρια διαφορά μεταξύ χαρτιού και υπολογιστή; Το χαρτί είναι στατικό, ενώ ο υπολογιστής είναι διαδραστικός. Και για να διευκολυνθεί αυτή η αλληλεπίδραση, οι ιστότοποι έχουν πλοήγηση, το οποίο γίνεται άχρηστο σε χαρτί.
Απόκρυψη της πλοήγησης και άλλων τμημάτων του ιστότοπού σας που καθίστανται άχρηστα σε χαρτί, όπως οι πλευρικές γραμμές που συνδέονται με άλλες θέσεις. Ο κώδικας για αυτό είναι πολύ εύκολος: απλά ρυθμίστε το στοιχείο display προς την none .
2. Μεγέθυνση της περιοχής περιεχομένου
Με την αφαίρεση της πλοήγησης και της πλαϊνής γραμμής, το περιεχόμενό μας είναι πλέον διανεμημένο σε ολόκληρη τη σελίδα. Αυτό κάνει το φύλλο στυλ εκτύπωσης να μοιάζει περισσότερο με ένα συνηθισμένο έγγραφο, αντί για μια έκδοση χαρτιού της ιστοσελίδας.
Το μόνο που πρέπει να κάνουμε για να επεκτείνουμε το περιεχόμενο είναι να επαναφέρουμε το πλωτήρα, να αφαιρέσουμε τυχόν περιθώρια και να ρυθμίσουμε το πλάτος στο 100%.
[css] #content {πλάτος: 100% · περιθώριο: 0 · float: none ·} [/ css]3. Επαναφέρετε τα χρώματα φόντου
Τα περισσότερα προγράμματα περιήγησης αγνοούν ήδη τις ιδιότητες φόντου για τη διατήρηση της μελάνης. Αλλά για να βεβαιωθείτε ότι ολόκληρο το φόντο είναι λευκό, μπορούμε να ορίσουμε το σώμα σε λευκό και στη συνέχεια να δώσουμε σε κάθε παιδικό στοιχείο ακόμα στη σελίδα ένα λευκό φόντο.
[css] σώμα {φόντο: λευκό;} # περιεχόμενο {φόντο: διαφανές;} [/ css]4. Επαναφορά χρωμάτων κειμένου
Με την επαναφορά του φόντου, εμφανίζεται ένα άλλο πρόβλημα. Τι γίνεται αν έχετε ένα σκούρο γκρι πλαίσιο "Πληροφορίες συγγραφέα" στο τέλος των αναρτήσεων σας, με το κείμενο να είναι ανοιχτό γκρι ή λευκό; Με το φόντο που έχει ρυθμιστεί τώρα στο λευκό, αυτές οι πληροφορίες θα είναι αόρατες.
Για να το διορθώσετε, αλλάξτε οποιοδήποτε ανοιχτόχρωμο κείμενο σε κάτι πιο σκοτεινό: μαύρο ή, κατά προτίμηση, σκούρο γκρι.
[css] #author {χρώμα: # 111;} [/ css]
Παίρνω Σαν Μπράουν 's blog παραπάνω. Θα μπορούσατε να φανταστείτε τι θα μοιάζει με αυτό αν δεν επαναφέρει τα χρώματα του κειμένου; Είναι πράγματι δυσανάγνωστο.
5. Εμφάνιση του προορισμού των συνδέσεων
Επειδή το χαρτί δεν είναι ένα διαδραστικό μέσο, οι αναγνώστες φυσικά δεν μπορούν να κάνουν κλικ σε συνδέσμους για να συγκεντρώσουν περισσότερες πληροφορίες.
Πείτε ότι κάποιος διαβάζει μια εκτύπωση για ένα φανταχτερό νέο προϊόν. Βλέποντας "Κάντε κλικ εδώ για περισσότερες πληροφορίες" ξαφνικά θα ήταν μάλλον ενοχλητικό για αυτούς, έτσι δεν είναι; Αυτό διορθώνεται εύκολα προσθέτοντας τον προορισμό συνδέσμου μετά το ίδιο το κείμενο του συνδέσμου, δίνοντάς σας κάτι τέτοιο: "Κάντε κλικ εδώ για περισσότερες πληροφορίες (http://hereismore.com/information)."
Επιπλέον, για προγράμματα περιήγησης CSS 2 έτοιμα, αυτό μπορεί να γίνει με απλό παλιό CSS. Εδώ είναι ο κώδικας:
[css] α: σύνδεσμος: μετά από {content: "(" attr (href) ")";} [/ css]Μπορείτε να καρυκευτείτε τα πράγματα με ένα μικρότερο μέγεθος γραμματοσειράς, πλάγια γράμματα ή οτιδήποτε άλλο.
6. Οι σύνδεσμοι να ξεχωρίζουν από το κανονικό κείμενο
Οι αναγνώστες πρέπει να είναι σε θέση να διακρίνουν τους συνδέσμους από το κανονικό κείμενο. Οι βασικοί κανόνες ευχρηστίας ισχύουν εδώ: προτιμάται το μπλε και η υπογράμμιση, αλλά προτιμώ να προσθέσω και τολμηρά γράμματα.
Θυμηθείτε ότι τα έγγραφα εκτυπώνονται συχνά σε ασπρόμαυρο. Μην εξαρτάτε μόνο από τη διαφορά χρώματος. Εδώ είναι ο κώδικας για ευαίσθητες τυπωμένες συνδέσεις:
[css] α: σύνδεσμος {font-weight: bold, κείμενο-διακόσμηση: υπογράμμιση, χρώμα: # 06c;} [/ css]# 0066cc είναι ένα φρέσκο μπλε χρώμα και μοιάζει με # 999999 όταν εκτυπώνεται σε κλίμακα του γκρι. Με αυτό, οι σύνδεσμοι θα φαίνονται καλά τυπωμένοι είτε σε χρώμα είτε σε ασπρόμαυρο. Θα ξεχωρίζουν επίσης από το κανονικό κείμενο.
7. Ποιο είναι το μέγεθος γραμματοσειράς;
Στην εκτύπωση, τα 12 σημεία είναι τα πρότυπα. Αλλά πώς μεταφράζουμε αυτό στο CSS; Μερικοί λένε ότι ο καθορισμός του μεγέθους γραμματοσειράς σε 12 βαθμούς (pt) είναι αρκετά καλός. Άλλοι συνιστούν τη ρύθμιση του σε 100%. Ακόμα άλλοι λένε ότι δεν δηλώνουν κανένα μέγεθος γραμματοσειράς στο φύλλο στυλ εκτύπωσης καθόλου, διότι κάτι τέτοιο θα υπερισχύει των προτιμήσεων του χρήστη.
Προσωπικά, πηγαίνω με ένα μέγεθος γραμματοσειράς 12 σημείων τις περισσότερες φορές:
[css] p {font-size: 12pt;} [/ css]8. Τι για τις γραμματοσειρές;
Οι περισσότεροι άνθρωποι προτιμούν γραμματοσειρές serif επειδή είναι λιγότερο κουραστικές στα μάτια, οδηγούν καλύτερα τον αναγνώστη μέσω του κειμένου και ούτω καθεξής. Ρύθμιση του font-family προς την serif στο φύλλο στυλ εκτύπωσης σας είναι πιθανώς μια καλή ιδέα, αν και μερικοί αναγνώστες μπορεί να εκπλαγούν να διαπιστώσουν ότι η γραμματοσειρά στην εκτύπωση τους δεν είναι η ίδια με αυτή της ιστοσελίδας σας.
Εδώ είναι ο κώδικας για μια καλή στοίβα γραμματοσειρών εκτύπωσης:
[css] σώμα {font-family: Γεωργία, 'Times New Roman', serif;} [/ css]
Ένα από τα πλεονεκτήματα της ιδιότητας @ font-face του CSS 3 είναι ότι μπορείτε να τυπώσετε και τις ειδικές γραμματοσειρές σας, καθιστώντας τις εκτυπώσεις να μοιάζουν πολύ περισσότερο με την ιστοσελίδα σας!
9. Το Blog μου έχει πολλά σχόλια. Τι πρέπει να κάνω?
Λοιπόν, αυτή είναι πραγματικά η επιλογή σας. Από τη μια πλευρά, σκεφτείτε όλα τα δέντρα που θα εξοικονομήσετε μόνο προσθέτοντας #comments { display: none; } στο φύλλο στυλ εκτύπωσης. Από την άλλη πλευρά, τα σχόλια έχουν μεγάλη αξία σε ορισμένα blogs και περιέχουν κάποια μεγάλη συζήτηση.
Μεταφέροντας τα σχόλια στη δική τους σελίδα, δίνετε στους χρήστες την επιλογή να εκτυπώσουν. Το CSS διαθέτει μια ιδιότητα που κάνει αυτό πολύ εύκολο:
[css] #comments {σελίδα-σπάσιμο-πριν: πάντα;} [/ css]Για παράδειγμα, εάν το άρθρο σας είναι διάρκειας δύο και μίας σελίδας, τα σχόλια θα ξεκινούσαν από τη σελίδα 4 μέχρι, για παράδειγμα, 6. Οι χρήστες θα μπορούσαν να επιλέξουν ποιες σελίδες θα εκτυπώσουν χωρίς να χάσουν οποιαδήποτε πληροφορία.
10. Εμφάνιση μηνύματος μόνο για εκτύπωση
" Σας ευχαριστώ για την εκτύπωση αυτού του άρθρου! Μην ξεχάσετε να επιστρέψετε στο mysite.com για νέα προϊόντα. "Γιατί να μην εμφανιστεί ένα φιλικό μήνυμα όπως αυτό στην εκτύπωση; Ή ίσως ζητήσετε από τους αναγνώστες να ανακυκλώσουν το χαρτί που χρησιμοποίησαν για τη διατήρηση του περιβάλλοντος.
Εδώ είναι αυτό που θα έμοιαζε:
Σας ευχαριστούμε για την εκτύπωση αυτού του άρθρου. Μην ξεχάσετε να επιστρέψετε στο mysite.com για νέα προϊόντα.
[css] #printMsg {εμφάνιση: μπλοκ;} [/ css] Θα μπορούσατε επίσης να προσθέσετε ένα κομμάτι στυλ, όπως ένα περίγραμμα 1 pixel. Μην ξεχάσετε να προσθέσετε #printMsg { display: none; } στο τακτικό φύλλο στυλ σας, για να αποφύγετε τη σύγχυση των επισκεπτών.
Βιτρίνα
Ακολουθούν ορισμένα παραδείγματα από γνωστούς ιστότοπους που σκέφτηκαν (ή ξεχάστηκαν) σχετικά με το φύλλο στυλ εκτύπωσης. Μη διστάσετε να εμπνευστείτε.
Φαίνεται καλό:
Εδώ είναι μερικοί ιστότοποι που κάνουν εξαιρετική δουλειά με τα φύλλα στυλ εκτύπωσης:
24 τρόποι : Ο δικτυακός τόπος για αυτό το "advent calendar για web geeks" έχει ένα φανταχτερό σχέδιο, αλλά αναρωτήθηκα πώς θα φαινόταν σε έντυπη μορφή. Το αποτέλεσμα είναι πολύ ωραίο. Η ουσία CSS 3 έχει αφαιρεθεί. Η διάταξη είναι καθαρή και ακόμα κηλίδα. Η μεγάλη επωνυμία έχει αφαιρεθεί, αντικαθίσταται από ένα απλό δεξιό ευθυγραμμισμένο "24 τρόποι" δίπλα στον τίτλο της δημοσίευσης.
ThinkVitamin : Το blog του Carsonified είναι ένα καλό παράδειγμα για το πώς να φτιάχνεις φύλλα στυλ εκτύπωσης. Δεν υπάρχουν πραγματικά αδύνατα σημεία εκτός από το ότι ο προορισμός της διεύθυνσης URL δεν εμφανίζεται.
CSS-Κόλπα : Ο Chris Coyier από το CSS-Tricks.com έχει κάνει καλή δουλειά με το φύλλο στυλ εκτύπωσης του. Έχει αφαιρέσει όλη την ακαταστασία και έχει μετακινήσει τα σχόλια σε μια νέα σελίδα, ώστε οι χρήστες να επιλέξουν να μην τις εκτυπώσουν.
Θα μπορούσε να χρησιμοποιήσει κάποια εργασία
Εδώ είναι μερικοί ιστότοποι που είναι ήδη μεγάλοι αλλά των οποίων τα φύλλα στυλ εκτύπωσης μπορούν να χρησιμοποιήσουν λίγο βερνίκι. Δεν υπάρχει κανένα αδίκημα σε κανέναν σε αυτήν την ενότητα.
Webdesign Ledger : Το λογισμικό Webdesign Ledger φαίνεται να έχει παραμελήσει το φύλλο στυλ εκτύπωσης. Όταν κάνετε κλικ στην επιλογή "Εκτύπωση", καταλήγετε με τρεις σελίδες διαφημίσεων και σχετικούς συνδέσμους.
Η καμπίνα σχεδιασμού : Ο Brian Hoff φαίνεται να έχει ξεχάσει και το φύλλο στυλ εκτύπωσης του. Όταν εκτυπώνετε ένα άρθρο, λαμβάνετε επίσης τη φόρμα σχολίων.
Flickr : Η δυνατότητα εκτύπωσης φωτογραφιών που θα προβληθούν στους φίλους θα ήταν ωραία. Το Flickr θα μπορούσε να αφαιρέσει τα πάντα εκτός από την ίδια την εικόνα και τις πληροφορίες σχετικά με τα πνευματικά δικαιώματα στις εκτυπώσεις. Αλλά όλα εμφανίζονται σε απλό, ασταθές HTML.
Πόροι
- Εύχρηστες συμβουλές για τη δημιουργία ενός φύλλου στυλ CSS εκτύπωσης από τη Γραμμή25
- Φύλλο στυλ εκτύπωσης: Ο οριστικός οδηγός
- CSS Design: Πηγαίνοντας να εκτυπώσετε
- Το CSS-Tricks παίρνει τελικά ένα φύλλο στυλ εκτύπωσης
Γράφτηκε αποκλειστικά για το WDD από τον Pieter Beulque. Είναι φοιτητής και webdeveloper , που ζουν στο Βέλγιο. Μπορείτε να τον ακολουθήσετε Κελάδημα πολύ.