Ελληνικοί χαρακτήρες χωρίς τόνους

Ελληνικοί χαρακτήρες χωρίς τόνους

Αρκετές φορές κατά τον σχεδιασμό μιας ιστοσελίδας χρειαζόμαστε να χρησιμοποιήσουμε κεφαλαίους χαρακτήρες σε σημεία όπως οι τίτλοι, τα h1, h2 κτλ. H γλώσσα CSS μας δίνει την δυνατότητα να μετατρέψουμε το κείμενο μας σε κεφαλαίους χαρακτήρες με μια απλή εντολή:

h1, h2, h3 { text-transform:uppercase };

Η παραπάνω εντολή θα μετατρέψει το κείμενο «This is an example» σε «THIS IS AN EXAMPLE». Το πρόβλημα όμως εμφανίζεται όταν προσπαθούμε να εφαρμόσουμε την παραπάνω μέθοδο σε ελληνικά κείμενα, καθώς η μετατροπή θα μας επιστρέψει το κείμενο με κεφαλαίους, τονισμένους χαρακτήρες πχ. «Αυτό είναι ένα παράδειγμα» σε «ΑΥΤΌ ΕΊΝΑΙ ΈΝΑ ΠΑΡΆΔΕΙΓΜΑ».

To παραπάνω αποτέλεσμα είναι αντιαισθητικό και μια λύση θα ήταν να γράφουμε στο CMS μας χωρίς τόνους τα κομμάτια που θα θέλαμε να εμφανίζονται με κεφαλαίους χαρακτήρες. Τι γίνεται όμως αν θέλουμε τα ίδια τμήματα να εμφανίζονται και σε διαφορετικά σημεία της ιστοσελίδας μας με πεζούς χαρακτήρες ή πως θα εκπαιδεύσουμε τους πελάτες μας που κάνουν τις καταχωρίσεις να εισάγουν μόνο τα σημεία αυτά που θέλουμε χωρίς τόνους;

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

jQuery(document).ready(function() {

    // Remove tonous from uppercase
    jQuery("h1, h2, h3").each(function() {
        jQuery(this).html(jQuery(this).html().replace(/[ά]/g,"α"));
        jQuery(this).html(jQuery(this).html().replace(/[έ]/g,"ε"));
        jQuery(this).html(jQuery(this).html().replace(/[ή]/g,"η"));
        jQuery(this).html(jQuery(this).html().replace(/[ύ]/g,"υ"));
        jQuery(this).html(jQuery(this).html().replace(/[ώ]/g,"ω"));
        jQuery(this).html(jQuery(this).html().replace(/[ί]/g,"ι"));
        jQuery(this).html(jQuery(this).html().replace(/[ό]/g,"ο"));
    });
   
});

Στο παραπάνω απόσπασμα κώδικα ορίζουμε με το που φορτώσει η ιστοσελίδα να γίνει η αντικατάσταση των τονισμένων χαρακτήρων σε όλα τα h1, h2, h3. Αντίστοιχα μπορούμε να τροποποιήσουμε τον κώδικα ώστε να κάνει τις αντικαταστάσεις σε περισσότερα ή λιγότερα στοιχεία της σελίδας μας.

Προσθήκη σχολίου