Έχει τύχει πολλές φορές κατά τον σχεδιασμό μιας ιστοσελίδας χρειαζόμαστε να χρησιμοποιήσουμε κεφαλαίους χαρακτήρες σε σημεία όπως οι τίτλοι, τα 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' );
Δεν χρειάζονται περίπλοκοι κώδικες για να λύσετε το πρόβλημα – αρκεί να δηλώσεστε στην HTML ότι το κείμενο είναι ελληνικό.
Πχ αν προσθέσετε στο το lang=’el’ και το κάνετε οι μοντέρνοι browsers θα αφαιρέσουν τους τόνους από τα μετατρεπόμενα κεφαλαία γραμματα στην σελίδα, και θα λειτουργεί κανονικά.
κάποιες λέξεις κόπηκαν από το αυτόματο κείμενο, ο σκοπός είναι να το κάνετε (αφαιρόντας το κενό ανάμεσα στο < και στο body 🙂