Ελληνικά, κεφαλαία, χωρίς τόνους (JavaScript/jQuery/WordPress)

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

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

Με χρήση JavaScript

Προσθέτουμε τον παρακάτω js κώδικα στο head της σελίδας μας, και πετυχαίνουμε Ελληνικά κεφαλαία χωρίς τόνους. Παράδειγμα: από ΓΙΆΝΝΗΣ θα γίνει αυτόματα ΓΙΑΝΝΗΣ, χωρίς να χρειαστεί να αλλάξουμε την value του text-transform στο css μας.

<script>(function(e){e.extend(e.expr[":"],{uppercase:function(t){var n=e(t).css("text-transform");return typeof n!=="undefined"&&n==="uppercase"},smallcaps:function(t){var n=e(t).css("font-variant");return typeof n!=="undefined"&&n==="small-caps"}});e.extend({removeAcc:function(e){var t=e.tagName.toLowerCase()=="input"?e.value:e.innerHTML;t=t.replace(/Ά/g,"Α");t=t.replace(/ά/g,"α");t=t.replace(/Έ/g,"Ε");t=t.replace(/έ/g,"ε");t=t.replace(/Ή/g,"Η");t=t.replace(/ή/g,"η");t=t.replace(/Ί/g,"Ι");t=t.replace(/Ϊ/g,"Ι");t=t.replace(/ί/g,"ι");t=t.replace(/ϊ/g,"ι");t=t.replace(/ΐ/g,"ι");t=t.replace(/Ό/g,"Ο");t=t.replace(/ό/g,"ο");t=t.replace(/Ύ/g,"Υ");t=t.replace(/Ϋ/g,"Υ");t=t.replace(/ύ/g,"υ");t=t.replace(/ϋ/g,"υ");t=t.replace(/ΰ/g,"υ");t=t.replace(/Ώ/g,"Ω");t=t.replace(/ώ/g,"ω");e.tagName.toLowerCase()=="input"?e.value=t:e.innerHTML=t}});e.fn.extend({removeAcc:function(){return this.each(function(){e.removeAcc(this)})}})})(jQuery);jQuery(document).ready(function(e){e(":uppercase").removeAcc();e(document).ajaxComplete(function(t,n,r){e(":uppercase").removeAcc()})})
</script>

Με χρήση jQuery

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

jQuery(document).ready(
    function($)
    {
        jQuery("h1, h2, h3").each(
            function()
            {
                if($(this).css('text-transform') == 'uppercase')
                {
                    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,"ο"));
                )
            }
        );
    }
);

Με χρήση PHP Function για WordPress

Εισάγεται το παρακάτω κώδικα στο functios.php του theme σας.

function soft_filter_titles( $title ) {
return str_replace(array('ά','έ','ή','ί','ό','ύ','ώ'), array('α','ε','η','ι','ο','υ','ω'), $title );
}
add_filter( 'the_title', 'soft_filter_titles' );

 

Πηγή για JavaScript
Πηγή για jQuery
Πηγή για WordPress

2 σκέψεις για “Ελληνικά, κεφαλαία, χωρίς τόνους (JavaScript/jQuery/WordPress)

  1. Γιάννης Γιαννόπουλος

    Δεν χρειάζονται περίπλοκοι κώδικες για να λύσετε το πρόβλημα – αρκεί να δηλώσεστε στην HTML ότι το κείμενο είναι ελληνικό.

    Πχ αν προσθέσετε στο το lang=’el’ και το κάνετε οι μοντέρνοι browsers θα αφαιρέσουν τους τόνους από τα μετατρεπόμενα κεφαλαία γραμματα στην σελίδα, και θα λειτουργεί κανονικά.

    1. Γιάννης Γιαννόπουλος

      κάποιες λέξεις κόπηκαν από το αυτόματο κείμενο, ο σκοπός είναι να το κάνετε (αφαιρόντας το κενό ανάμεσα στο < και στο body 🙂

Αφήστε μια απάντηση

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *

Συνεχίζοντας να χρησιμοποιείτε την ιστοσελίδα, συμφωνείτε με τη χρήση των cookies. Περισσότερες πληροφορίες.

Οι ρυθμίσεις των cookies σε αυτή την ιστοσελίδα έχουν οριστεί σε "αποδοχή cookies" για να σας δώσουμε την καλύτερη δυνατή εμπειρία περιήγησης. Εάν συνεχίσετε να χρησιμοποιείτε αυτή την ιστοσελίδα χωρίς να αλλάξετε τις ρυθμίσεις των cookies σας ή κάνετε κλικ στο κουμπί "Κλείσιμο" παρακάτω τότε συναινείτε σε αυτό.

Κλείσιμο