Βελτιώνοντας την τυπογραφία με τη χρήση CSS

Πρόσφατα άλλαξα κάποια πράγματα στην τυπογραφία του site με τη χρήση CSS μόνο και χωρίς να επέμβω καθόλου στην HTML. Για να γίνει αυτό, χρησιμοποίησα μερικές τεχνικές που θα έρθουν κι επίσημα όταν ανακοινωθεί η έκδοση 3 των CSS, αλλά υποστηρίζονται από τώρα από τους καλούς browsers.

Προφανώς οι αλλαγές αυτές δε θα φανούν καθόλου στους επισκέπτες με Internet Explorer 6, αλλά μακάρι να ήταν αυτό το πρόβλημα μόνο. Τέλος πάντων.

CSS για ν’ αρχίζουν όλες οι παράγραφοι, εκτός της πρώτης, με εσοχή

Οι παρατηρητικοί θα είδαν ότι όλες οι παράγραφοι των κειμένων ξεκινούν με μια εσοχή, εκτός της πρώτης που ξεκινάει χωρίς. Για να γίνει αυτό χρησιμοποίησα τα adjacent sibling selectors που θα ανακοινωνθούν με τα CSS3, αλλά έχουν αρχίσει να υποστηρίζονται ήδη από τους browsers.

Τα adjacent sibling selectors λειτουργούν στα CSS με το σύμβολο “+” και δημιουργούν κανόνες για tags που είναι αδέλφια, δηλαδή δεν εμπεριέχει το ένα το άλλο. Αρχικά ήθελα να είμαι βέβαιος ότι η πρώτη πράγραφος κάθε ενότητας δε θα ξεκινάει με εσοχή. Για τις ενότητες χρησιμοποιώ τα tags:<h1> για τον τίτλο της κάθε σελίδας, <h2> για τον υπότιτλο και <h3> για τον 3ο τίτλο. Για λόγους συντομίας, ας ξεχάσουμε για λίγο τα <h1> & <h3> κι ας σκεφτούμε μόνο τα <h2>, που είναι και περισσότερα σε μια τυχαία σελίδα όπως αυτή.

O CSS κώδικας ήταν:

h2+p {
text-indent: 0;
}

Αυτό σημαίνει ότι κάθε παράγραφος η οποία έπεται ενός υπότιτλου (<h2>) δε θα μπαίνει σε εσοχή.

Το επόμενο που έπρεπε να κάνω ήταν να γράψω τον κανόνα για όλες τις άλλες παραγράφους. Με άλλα λόγια για τις παραγράφους που έπονται μιας άλλης παράγραφου:

p+p {
text-indent: 2em;
}

(Ο όρος em μετράει μέγεθος, αντίστοιχο του pixel. Περισσότερα για το em έχω γράψει στο κείμενο Εφαρμογή καλής τυπογραφίας στο Web (μέρος 1ο). Όσοι ψάξουν το CSS του site θα δουν ότι τα 2em είναι 20px.)

CSS για το πρώτο γράμμα κάθε παραγράφου μετά τον υπότιλο

Για κάθε πρώτη παράγραφο αμέσως μετά έναν υπότιλο <h2> (όπως αυτή στην οποία βρισκόμαστε αυτή τη στιγμή) χρησιμοποιήθηκε η παραπάνω τεχνική των adjacent sibling selectors σε συνδυασμό με τα pseudo-elements.

Τα pseudo-elements δηλώνονται με την άνω-κάτω τελεία “:” και επιτρέπουν να δημιουργήσουμε κάποια εφέ που δεν υποστηρίζονται από το DOM, δηλαδή με το πως έχει οριστεί να δουλεύει μια ιστοσελίδα.

Για να πετύχω λοιπόν το εφέ με το πρώτο γράμμα να ξεχωρίζει από τα υπόλοιπα, έγραψα στο CSS τα εξής:

h2+p:first-letter {
	font-family: Georgia, Times, "Times New Roman", serif;
	background: #333;
	color: #eed;
	float: left;
	font-size: 5em;
	line-height: .75em;
	margin: 0 .1em 0 0;
	padding: .1em;
}

To h2+p:first-letter σημαίνει ότι ο κανόνας αφορά το πρώτο γράμμα κάθε παραγράφου που έπεται ενός υπότιτλου.

Μέσα στις αγκύλες, οι 3 πρώτες γραμμές ορίζουν τη γραμματοσειρά, το background χρώμα και το χρώμα του πρώτου γράμματος, η 4η ορίζει ότι αυτό πρέπει πάντα να βρίσκεται αριστερά, η 5η το μέγεθος του γράμματος και οι τελευταίες τις αποστάσεις του γράμματος σε σχέδη με το background του και την υπόλοιπη παράγραφο.

Αυτά είναι μόνο η αρχή...

Οι δυνατότητες που θα έχουν οι Web designers με τα νέα CSS είναι πολύ περισσότερες. Αυτό όμως είναι κάτι που δε φαίνεται ότι θα έρθει πολύ σύντομα. Εδώ και καιρό θέλω να γράψω τι θα μπορούμε να κάνουμε (ειδικά στο κομμάτι της τυπογραφίας και του layout) με το νέο specification και κάποια στιγμή θα το κάνω. Μέχρι τότε μπορούμε άφοβα να πειραματιζόμαστε με όσα όπλα έχουμε.