css3.gr

Στην αρχή, ήταν η Arial, η Helvetica, η Times και η Courier. Και όλοι ήταν ευχαριστημένοι.

Κάπου ανάμεσα στο τότε και το τώρα όμως, οι web designers απέκτησαν απαιτήσεις: τα λεγόμενα web fonts θεωρούνται πλέον εξαιρετικά περιορισμένα και αρκετοί από εμάς παραπονιόμαστε καθημερινά για τις πενιχρές δυνατότητες που μας προσφέρει η τυπογραφία στο Web σήμερα. Αν και έχουν γίνει σημαντικά βήματα στο χώρο του Web typography - ακριβώς λόγω αυτών των περιορισμών - το πρόβλημα παραμένει το ίδιο:

Πώς μπορούμε να χρησιμοποιήσουμε τα fonts των ονείρων μας στο Web;

Τί είναι το image replacement;

Το image replacement είναι μια αρκετά απλή λύση για τη χρήση custom γραμματοσειρών κατά το web design. Βασίζεται στην αντικατάσταση του κειμένου με την αντίστοιχη εικόνα, στην οποία έχουμε εισάγει το ίδιο κείμενο με την επιθυμητή γραμματοσειρά. Από την αρχή της έννοιας του image replacement στο web design, αναπτύχθηκαν πολλές λύσεις και παραλλαγές της αρχικής ιδέας του Douglas Bowman, που βασίστηκε στις τεχνικές του C.Z. Robertson.

Μία από τις πιο απλές περιπτώσεις image replacement, χωρίς τη χρήση επιπλέον markup, είναι αυτή:

<h2>This is a sample header</h2> h2 { background: url(“img/header.gif”) no-repeat top left; text-indent: -9999em; height: 25px; }

Όπως μπορούμε να δούμε, το κείμενο “κρύβεται” με ένα αρκετά μεγάλο αρνητικό περιθώριο προς τα αριστερά, ενώ τη θέση του παίρνει η εικόνα με το επιθυμητό font. Ο χρήστης δεν βλέπει καθόλου το κείμενο παρά μόνο την εικόνα, με αποτέλεσμα να δημιουργείται η ψευδαίσθηση της χρήσης custom γραμματοσειράς.

Μέχρι τώρα, το image replacement ήταν μια αρκετά αμφιλεγόμενη λύση, καθώς στις αρχικές του μορφές παρουσίαζε αρκετά προβλήματα προσβασιμότητας. Πολλές τεχνικές επέβαλλαν περιορισμούς στο είδος των εικόνων ή απαιτούσαν την εισαγωγή επιπλέον markup χωρίς νόημα, ενώ οι περισσότερες απλά δεν λειτουργούσαν σωστά στην περίπτωση που ο χρήστης έχει απενεργοποιημένες εικόνες αλλά ενεργά CSS κατά την πλοήγηση. Επιπλέον, έως πρότινος δεν ήταν καν σίγουρο ότι το Google δεν “τιμωρούσε” τα sites που χρησιμοποιούσαν τεχνικές image replacement - άλλωστε δεν είναι παρά ένας τρόπος να “κρύβεις” κείμενο, ή τουλάχιστον έτσι θα φαινόταν σε ένα bot.

Με την ανάπτυξη ολοένα και πιο αξιόπιστων και cross-browser λύσεων, όπως επίσης και μετά τις διαβεβαιώσεις του Google ότι δεν θεωρείται SEO spam, το image replacement επανέκτησε την αρχική του αίγλη, αν και εξακολουθεί να μοιάζει περισσότερο με cheat παρά με πιστοποιημένη μέθοδο.

Με τη βοήθεια του content

Εδώ έρχεται να μας βοηθήσουν τα CSS3. Εκτός από την προσθήκη του @font-face, που φαίνεται να κερδίζει τις καρδιές πολλών web designers, το working draft των CSS3 προσφέρει και νέες δυνατότητες για τη χρήση της μεθόδου του image replacement, με τη χρήση της ιδιότητας property.

Η υποστήριξη του content είναι μέχρι στιγμής πειραματική για τον Safari και την Opera, ενώ ο Firefox προσφέρει τμηματική υποστήριξη, σε συνδυασμό με τα ψευδο-στοιχεία :before και :after.

Η λειτουργία του content είναι απλή: επιτρέπει στον designer να εισάγει κείμενο ή εικόνα σε ένα στοιχείο HTML, αντικαθιστώντας το περιεχόμενό του. Ακούγεται (και είναι) αρκετά βολικό, καθώς το παραπάνω παράδειγμα θα μπορούσε να γίνει κάτι σαν:

h2 { content: url(“img/header.gif”); }

Για να μπορέσει να αντικαταστήσει αυτή η μέθοδος τις διάφορες μεθόδους image replacement, οφείλει να συμπεριφέρεται λογικά στην περίπτωση που δεν υπάρχει για κάποιο λόγο η εικόνα με την οποία γίνεται η αντικατάσταση του κειμένου. Τα CSS3 specifications έχουν μεριμνήσει και γι’αυτό, καθώς επιτρέπουν πολλαπλό ορισμό στο content, όμοια με το font-family:

h2 { content: url(“img/header.gif”), url(“img/header.png”), contents; }

Προσοχή στο contents: είναι απαραίτητο για τη σωστή λειτουργία της δήλωσης, καθώς στην περίπτωση που δεν υπάρχει καμία από τις εικόνες, η προκαθορισμένη συμπεριφορά των specifications είναι να μην χρησιμοποιηθεί καμία εικόνα, με αποτέλεσμα να εξαφανιστούν τα headers σας. Με το contents, στην έσχατη περίπτωση το περιεχόμενο θα παραμείνει ανέπαφο - όχι και τόσο τρομερό σε σχέση με τις …αόρατες επικεφαλίδες.

Εν κατακλείδι

Με την εισαγωγή του @font-face, τα CSS3 φαίνεται να βάζουν σε πρώτη προτεραιότητα την τυπογραφία στο Web. Αν και η χρήση του image replacement θα μειωθεί αρκετά λόγω αυτού, είναι παρήγορο να ελπίζουμε σε τεχνικές όπως η παραπάνω, που θα βελτιώσουν τις υπάρχουσες λύσεις απλά και αξιόπιστα.