Αρχίγραμμα με CSS

Υπάρχει ένα css pseudo-element που δεν είναι ευρέως γνωστό, παρ,ότι πολύ χρήσιμο: To :first-letter. Στην προκειμένη περίπτωση μας σώζει από extra non-semantic markup (και server-side κώδικα, στην περίπτωση δυναμικής σελίδας) για να δημιουργήσουμε αρχίγραμμα σε κάποια κείμενα. Έστω πχ ότι το εν λόγω κείμενο βρίσκεται μέσα σε ένα div με class “content”. O css selector μας θα είχε ως εξής:

div.content:first-letter

Το βασικό για τη δημιουργία αρχιγράμματος είναι οι δύο παρακάτω δηλώσεις:

display:block;
float:left;

Αυτές του δίνουν τη δομή που θέλουμε. Συνήθως χρειάζεται και η

line-height:100%;

για όσους βαριούνται, ή αν δεν βαριέστε, για καλύτερο αποτέλεσμα, στην τιμή της line-height μπορείτε να δώσετε το ακριβές αποτέλεσμα του πλήθους των γραμμών που θέλετε να καταλαμβάνει το αρχίγραμμα επί το line-height του κανονικού κειμένου. Πχ στην δική μου περίπτωση, το line-height ήταν 24px και ήθελα το αρχίγραμμα να καταλαμβάνει σε ύψος 3 γραμμές κειμένου, οπότε έδωσα line-height:72px;.

Τα υπόλοιπα αφορούν εμφανισιακές λεπτομέρειες που επαφίενται στην δική σας δημιουργικότητα. Προσέξτε μόνο να δώσετε κάποιο margin (αλλιώς θα κολλάει στο κείμενο) και ένα font-size σε ems (ώστε να λειτουργεί σωστά σε κάθε μέγεθος κειμένου, και να μεγαλώνει μαζί με τα γράμματα, όταν ο χρήστης προσπαθήσει να τα μεγαλώσει). Στην περίπτωση μου, όλος ο css rule είχε ως εξής:

.post .post_content:first-letter
{
    display:block;
    float:left;
    font-size:6em;
    margin:0px 8px 1px 0px;
    line-height: 72px;
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#97bac8;
    font-style:italic;
}

Και το αποτέλεσμα το βλέπετε στην εικόνα παρακάτω (από ΙΕ7).

Highlights: Δεν χαλάει το validation, και δουλεύει και σε ΙΕ6, προς μεγάλη μου έκπληξη!