Ένα συχνό πρόβλημα που αντιμετωπίζουν οι Web Developers είναι πως συχνά χρειάζεται κάποια κείμενα ή τίτλοι να γίνουν με Κεφαλαία σε κάποια σημεία και σε άλλα να είναι με μικρά (σωστά και με τόνους). Η εντολή text-transform:uppercase; σε ελληνικούς χαρακτήρες εμφανίζει και τους τόνους στα κεφαλαία και το αποτέλεσμα δεν είναι ωραίο...
Μια λύση που θα μπορούσε να δοθεί είναι με την χρήση HTML/CSS/Jquery.
Έστω ότι θέλουμε να μετατρέψουμε το τίτλο ενός άρθρου σε κεφαλαία, το οποίο έχει Η1 tag.
Κώδικας CSS
h1 {text-transform:uppercase;}
Κώδικας Jquery
$("h1").each(function() {
$(this).html($(this).html().replace(/[ά]/g,"α"));
$(this).html($(this).html().replace(/[έ]/g,"ε"));
$(this).html($(this).html().replace(/[ή]/g,"η"));
$(this).html($(this).html().replace(/[ύ]/g,"υ"));
$(this).html($(this).html().replace(/[ώ]/g,"ω"));
$(this).html($(this).html().replace(/[ί]/g,"ι"));
$(this).html($(this).html().replace(/[ό]/g,"ο"));
});
Εναλλακτικά αν θέλετε όλα τα Header tags να είναι κεφαλαία:
Κώδικας CSS
h1, h2, h3 { text-transform:uppercase };
Κώδικας 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,"ο"));
});
});
* Πρέπει το Jquery να έχει ρυθμιστεί σωστά στην σελίδα μας.
