text-transform:uppercase, πρόβλημα με τους τόνους στα κεφαλαία

Πριν μερικούς μήνες έφτιαξα μια ιστοσελίδα για τη γυναίκα μου, που είναι διαιτολόγος.

Ως χρήστης του firefox ανέπτυξα τη σελίδα σε αυτόν και εκ των υστέρων την έλεγξα και με άλλους browsers (π.χ. chrome, opera κτλ.). Τότε παρατήρησα κάτι περίεργο.

Το πρόβλημα

Στην κορυφή της σελίδας υπάρχει ένα μενού “πλοήγησης” όπου υπάρχουν σύνδεσμοι στις διάφορες σελίδες του ιστότοπου. Το μενού είναι με κεφαλαία και ενώ στον firefox όλα ήταν φυσιολογικά στους υπόλοιπους browsers είχε τόνους στα κεφαλαία γράμματα.

Οι σύνδεσμοι όπως εμφανίζονται στον firefox
Οι σύνδεσμοι όπως εμφανίζονται στον firefox
Οι σύνδεσμοι όπως εμφανίζονται στους υπόλοιπους browsers
Οι σύνδεσμοι όπως εμφανίζονται στους υπόλοιπους browsers

Αρχικά δεν ήξερα τι συμβαίνει. Ωστόσο ψάχνοντας κατέληξα στον “φταίχτη”. Ήταν η εντολή text-transform:uppercase που είχα στο CSS. Το theme που χρησιμοποιούσα με αυτό τον τρόπο μετατρέπει τις ονομασίες των σελίδων που έχουν καταχωρηθεί με μικρά σε κεφαλαία για χρήση στο μενού πλοήγησης που υπάρχει στη κορυφή της σελίδας.

Γιατί όμως στο firefox ήταν χωρίς τόνους ενώ στους άλλους browsers ήταν με τόνους; Μετά από ψάξιμο έπεσα πάνω σε αυτό το πολύ αναλυτικό και επεξηγηματικό άρθρο. Φαίνεται πως ο firefox είναι ο πρώτος browser (και από ότι φαίνεται μοναδικός) που τηρεί τους κανόνες του ελληνικού τονισμού όταν εκτελεί τις εντολές text-transform:uppercase και font-variant:small-caps της γλώσσας CSS.

Η λύση;

Σύμφωνα με το συντάκτη του προαναφερθέν άρθρου η λύση είναι να μη χρησιμοποιούμε καθόλου την εντολή text-transform:uppercase στα ελληνικά (και όχι μόνο, αν κατάλαβα καλά). Άλλες λύσεις προτείνουν τη χρήση κάποιου script για τη σωστή μετατροπή σε κεφαλαία.

Εγώ προς το παρών δεν έχω αποφασίσει τι να κάνω και κατέληξα να έχω αφήσει τη σελίδα όπως είναι, με τους τόνους.

Εσείς τι τεχνική ακολουθείτε για να μετατρέπετε σε κεφαλαία, σε συγκεκριμένα σημεία στη σελίδα, λέξεις που αρχικά είναι γραμμένες με μικρά;