Micaela 6 de Febrero de 2009 a las 11.30
   Imprimir artículo
elWebmaster.com

CSS: Ajustando el tama├▒o de la fuente seg├║n la cantidad de palabras


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


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Carlos dice:

    ┬┐Donde est├í el CSS exactamente? T├ştulo enga├▒oso…

  2. edwin dice:

    En estas lineas esta el css.
    $quote.css(ÔÇŁfont-sizeÔÇŁ, ÔÇť24pxÔÇŁ);

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesi├│n