Bazen web sitenizde yer alan bazı metin bloklarının yazıtipi boyutunu, dahili oldukları kapsayıcılara tam olarak sığabilmesi için değiştirmek isteyebilirsiniz. Ancak bu metin blokları sürekli olarak güncelleniyorsa ya da her bir metin bloğu için ayrı ayrı stil tanımlamak istemiyorsanız, o zaman metin boyutunu kullanılan kelime sayısına göre otomatik olarak tanımlamak isteyebilirsiniz.Bunu gerçekleştirmek JavaScript kütüphaneleri kullanarak mümkün.Plan
* Hedeflediğiniz paragrafı belirleyin.* Paragrafı kelime dizilerine bölümleyin ve her bir boşlukta kelime sayısını bir arttırın.* Dizinin uzunluğunu hesaplayın.* Yazıtipi boyutunu uzunluğa göre belirleyin.Bunu mooTools İle Yapmak İçin
window.addEvent(‘domready’,function() {$quote = $$(‘.post p’)[0];var $numWords = $quote.get(‘text’).split(‘ ‘).length;if (($numWords >= 1) && ($numWords < 10)) {$quote.setStyle('font-size','36px');}else if (($numWords >= 10) && ($numWords < 20)) {$quote.setStyle('font-size','32px');}else if (($numWords >= 20) && ($numWords < 30)) {$quote.setStyle('font-size','28px');}else if (($numWords >= 30) && ($numWords < 40)) {$quote.setStyle('font-size','24px');}else {$quote.setStyle('font-size','20px');};});
Bunu jQuery İle Yapmak İçin
$(function(){var $quote = $(“.post p:first”);var $numWords = $quote.text().split(” “).length;if (($numWords >= 1) && ($numWords < 10)) {$quote.css("font-size", "36px");}else if (($numWords >= 10) && ($numWords < 20)) {$quote.css("font-size", "32px");}else if (($numWords >= 20) && ($numWords < 30)) {$quote.css("font-size", "28px");}else if (($numWords >= 30) && ($numWords < 40)) {$quote.css("font-size", "24px");}else {$quote.css("font-size", "20px");}});
*
Kaynak: CSS-Tricks* Yazılarımı RSS Üzerinden Takip Edin* @pinkfloyd twitter* pinkfloyd köşesi
