Algunas citas suelen ser más largas que otras por lo que puede llegar a resultar útil para mantener la elegancia del sitio reforzar el tamaño de la fuente de las citas más cortas y hacer más pequeño el de las más largas para que queden parejas.
Para lograrlo sin mayores inconvenientes CSS Tricks ha implementado Javascript lo que facilitará el ajuste, manteniendo el contenido y la presentación.
La idea
- Establecer un objeto del párrafo al que estamos apuntando.
- Separar el párrafo en un array de palabras, divididas por cada “espacio”.
- Contar el largo del array.
- Establecer el tamaño de fuente según esa cuenta.
Para hacerlo con MooTools
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’);
};
});
Para hacerlo con jQuery
$(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”);
}
});
Fuente: CSS Tricks
Lunes, 9 de Febrero de 2009 a las 17.38
¿Donde está el CSS exactamente? TÃtulo engañoso…