HOW-TO Έχεις website δες: Print styles για το website σας

Κάντε την ιστοσελίδα σας κομψή, ακόμη και στην προβολή εκτύπωσης

Τα print styles είναι κανονικά αρχεία CSS, όπως αυτά που χρησιµοποιούν ήδη όλες οι ιστοσελίδες, µε τη διαφορά ότι τα συγκεκριµένα απευθύνονται στους εκτυπωτές και καθορίζουν πώς θα εµφανίζεται µια ιστοσελίδα στο χαρτί. Συνήθως κατά τη δηµιουργία µιας ιστοσελίδας δε δίνεται βάση στα print styles. Κατά συνέπεια, οι περισσότερες σελίδεςδεν εκτυπώνονται σωστά, ενώ στο χαρτί αποτυπώνονται στοιχεία που κανονικά θα έπρεπε να κρύβονται. Για να καταλάβετε πώς ακριβώς λειτουργούν τα print styles, ανοίξτε µερικές ιστοσελίδες που επισκέπτεστε συχνά, µπείτε σε µια σελίδα µε περιεχόµενο ή κείµενο και στον browser σας πηγαίνετε στο File > Print > Print Preview [εικ. 1]. Στις ιστοσελίδες στις οποίες δεν έχουν φροντίσει να συµπεριλάβουν print style, θα δείτε ότι το περιεχόµενο που εκτυπώνεται είναι άναρχα δοµηµένο στο χαρτί. Αυτό ακριβώς έρχεται να διορθώσει το print style.


Προσθέστε το print style στις σελIδες σας
Δηµιουργώντας µια ιστοσελίδα, στο 

 του HTML κώδικά σας ορίζετε τα paths των CSS αρχείων, για να τα συµπεριλάβετε όταν φορτώνεται η σελίδα σας από κάποιον browser. Αυτό το κάνετε γράφοντας το εξής:



Ο παραπάνω κώδικας δηµιουργεί έναν σύνδεσµο της σελίδας µε το αρχείο style.css, διευκρινίζει ότι είναι αρχείο stylesheet [δηλαδή περιέχει CSS κώδικα] και τέλος στο attribute media ορίζει από ποια µέσα προβολής της ιστοσελίδας θα καλείται. Το allπεριλαµβάνει όλες τις συσκευές που µπορούν να διαβάσουν τον κώδικα µιας ιστοσελίδας. Για παράδειγµα, κάποιες άλλες τιµές που µπορεί να πάρει το media attribute είναι screenγια συσκευές µε οθόνη παντός τύπου, tv για τηλεοράσεις, projection για προτζέκτορες καιhandheld για όλες τις φορητές συσκευές. Καθεµία από αυτές τις τιµές καθορίζει πότε θα φορτώνεται το αρχείο, ανάλογα µε τη συσκευή που χρησιµοποιείται.

Για να συµπεριλάβετε, λοιπόν, ένα print style στη σελίδα σας, κάτω από τις δηλώσεις για τα κανονικά stylesheets της σελίδας προσθέστε τον εξής κώδικα:



Με τον παραπάνω κώδικα λέτε στην ιστοσελίδα, όταν ο χρήστης πατήσει την εντολή Print ή print preview, να µη χρησιµοποιήσει τα κανονικά CSS [στο παράδειγµα το style.css] αλλά µόνο το αρχείο print.css [εικ. 2].

Δημιουργήστε το print style σας
Δηµιουργήστε ένα νέο αρχείο CSS και ονοµάστε το print.css. Για να γράψετε τον κώδικα µέσα στο αρχείο print.css, πρέπει πρώτα να καταλάβετε πώς ακριβώς λειτουργεί ένας εκτυπωτής όταν καλείται να εκτυπώσει µια ιστοσελίδα. Για αρχή, δοκιµάστε να κάνετε ένα print preview της σελίδας σας. Δείτε το αποτέλεσµα όταν δεν υπάρχει print style. Όταν πατάτε την εντολή να κάνετε εκτύπωση, το µόνο που καταλαβαίνει ο εκτυπωτής από τη σελίδα σας είναι το κείµενο και οι εικόνες που βρίσκονται σε αυτήν.  Έτσι, όταν πατάτε print ή print preview, αγνοεί τα CSS για όλες τις συσκευές, εµφανίζοντας µόνο το κείµενο, τις εικόνες και γενικότερα τα δοµικά στοιχεία της σελίδας. Αγνοώντας τα υπάρχοντα CSS για τις άλλες συσκευές, αυτόµατα "καταστρέφει" το πώς εµφανίζεται κάθε στοιχείο στη σελίδα. Αυτό έχει ως αποτέλεσµα, αν για παράδειγµα είχατε ορίσει έναν τίτλο για το header της σελίδας σας µε συγκεκριµένο µέγεθος, γραµµατοσειρά και χρώµα, πλέον θα φαίνεται χωρίς τα δικά σας styles.

Για να είµαστε πιο ακριβείς, όλοι οι σύγχρονοι browsers έχουν τα δικά τους stylesheetsεγκατεστηµένα στον υπολογιστή σας και τα εφαρµόζουν στις ιστοσελίδες, σε περίπτωση που δεν υπάρχουν δικά σας stylesheets. Σε µια ιστοσελίδα που δεν έχει print styles, αν την βλέπετε από Firefox 7, για παράδειγµα, και πατήσετε print ή print preview, κάθε στοιχείο Η1 στη σελίδα θα πάρει µέγεθος 32 pixels και χρώµα µαύρο. Γνωρίζοντας, λοιπόν, όλα αυτά, µπορείτε να ξεκινήσετε να γράφετε τον CSS κώδικά σας στο print.css, για να "πατήσετε" στα styles που δίνει ο εκάστοτε browser από µόνος του, και να επιλέξετε εσείς πώς θα εµφανίζεται η ιστοσελίδα σας στο χαρτί. Ξεκινήστε γράφοντας τα πολύ βασικά:

body {
   background: white;
   font-size: 12pt;
}
#wrapper,#content {
   width: auto;
       border: 0;
   margin: 0;
   padding: 0;
   float: none !important;
}

Πρώτα απ’ όλα, φροντίστε να µην έχετε χρώµα στο background της σελίδας, γιατί θα αναγκάσετε το χρήστη να χρησιµοποιήσει χρώµα στην εκτύπωση. Μετά, ορίστε ένα λογικό µέγεθος γραµµάτων, που να διαβάζεται εύκολα αλλά ταυτόχρονα να µην είναι πολύ µεγάλο. Προσοχή! Χρησιµοποιήστε points [pt], γιατί  ο εκτυπωτής καταλαβαίνει πόσο ακριβώς είναι ένα point σε σχέση µε το ένα pixel που αφορά στην ανάλυση της οθόνης. Συνεχίστε αντικαθιστώντας στοιχεία κειµένου που θέλετε να έχουν συγκεκριµένο χρώµα και µέγεθος. Για παράδειγµα, αν θέλετε οι τίτλοι Η1 και Η2 να έχουν άλλο χρώµα, γράψτε:

h1, h2 {
   color: #f5791f;
}

Συνεχίστε κάνοντας αντικαταστάσεις σε στοιχεία που έχουν συγκεκριµένα styles όπως, για παράδειγµα, λίστες και διάφορα στοιχεία µε background-image δηλωµένα στο κανονικό CSS της ιστοσελίδας, γιατί τα print styles δεν υποστηρίζουν εικόνες παρασκηνίου. Γράψτε:

ul li {
   background: none;
   list-style: circle;
}

Τέλος, κρύψτε όσα στοιχεία δε χρειάζεται να εµφανίζονται σε κάποιον που θέλει να εκτυπώσει ένα άρθρο από την ιστοσελίδα σας. Πιο συχνό παράδειγµα είναι η sidebar της σελίδας που µπορεί να έχει διαφηµίσεις, video, links και πολλά άλλα. Για να κρύψετε τέτοια στοιχεία, γράψτε για καθένα από αυτά τον κώδικα κάπως έτσι:

.header,.sidebar,.footer
{
   display: none;
}

Αφού διαγράψετε όλα τα στοιχεία που δε χρειάζεστε και αφαιρέσετε όλες τις εικόνες παρασκηνίου και τα χρώµατα από τη σελίδα σας, δοκιµάστε να κάνετε ένα print preview. Θα δείτε ότι τα πράγµατα έχουν έρθει στη θέση τους, ενώ δεν υπάρχουν στοιχεία που θα αναγκάσουν το χρήστη να χρησιµοποιήσει µελάνι χωρίς λόγο. Τέλος, πρέπει να σκεφτείτε και τους συνδέσµους στο κείµενό σας, αφού προφανώς δεν είναι χρήσιµοι σε κάποιον που τους διαβάζει από το χαρτί. Έτσι, µένει να τους εµφανίσετε κάπως ώστε ο χρήστης που εκτύπωσε τη σελίδα σας να µπορέσει να βρει το σύνδεσµο απλώς διαβάζοντάς τον. Γράψτε:

a:link, a:visited {
   color: #520;
   background: transparent;
   text-decoration: underline;
}

Με τον παραπάνω κώδικα κάνετε τα links πιο έντονα, τους δίνετε υπογράµµιση και λίγο διαφορετικό χρώµα [πάντα απόχρωση
του µαύρου], ώστε ο αναγνώστης να καταλαβαίνει ότι υπάρχει σύνδεσµος εκεί. Τέλος, γράψτε:
a:link:after,a:visited:after {
   content: " (" attr(href) ") ";
   font-size: 90%;
}

Ο κώδικας θα πάει σε κάθε link και θα εκτυπώσει δίπλα την πλήρη διεύθυνση του υπερσυνδέσµου.

Πλέον ελέγχετε πλήρως πώς θα εµφανίζεται η ιστοσελίδα σας κατά την εκτύπωση [εικ. 3].



ΞΕΡΑΤΕ ΟΤΙ
Πρέπει να γνωρίζετε εξαρχής πως πολλές παράµετροι µπορεί να αλλάζουν από χρήστη σε χρήστη και από εκτυπωτή σε εκτυπωτή. Έτσι, ανάλογα µε τις προϋποθέσεις τής κάθε εκτύπωσης, το αποτέλεσµα ίσως να διαφέρει λίγο. Παρ' όλα αυτά, αν το κείµενό σας διαβάζεται εύκολα, χωρίς στοιχεία που είναι περιττά στο χαρτί, έχετε καταφέρει ακριβώς αυτό που οφείλει να κάνει µια ιστοσελίδα όταν θέλουµε να την εκτυπώσουµε.