Justificar titulares con jQuery

slabText resuelve uno de los problemas más comunes y que más afean cualquier diseño, me refiero a la justificación de titulares. Este pequeño plugin, que en su versión comprimida no supera los 2KB, justifica automáticamente los titulares de un sitio web, de esta forma logramos textos completamente equilibrados y que respetan la estructura y geometría del sitio con total perfección.

Un titular alineado con el plugin conserva perfectamente la geometría y cuerpo del documento, para lograrlo utiliza un pequeño algoritmo por el cual calcula el tamaño indicado de las distintas palabras para que el resultado sea un bloque de texto visualmente organizado.

Por ejemplo, yo hice una pequeña prueba, el resultado fue el siguiente titular:

El plugin requiere modificar mínimamente nuestras hojas de estilo, el cambio que debemos realizar es el siguiente:

.slabtexted .slabtext { display:inline-block white-space:nowrap; }
.slabtextinactive .slabtext { display:inline; white-space:normal }
.slabtextdone .slabtext { display:block }

Finalmente debemos inicializar el plugin, aquí el autor sugiere un pequeño hack para demorar un poco la ejecución permitiendo la correcta carga de las tipografias externas:

<script>
function slabTextHeadlines() {
	$("h1").slabText({
		"viewportBreakpoint":380
	});
};

$(window).load(function() {
	setTimeout(slabTextHeadlines, 1000);
});
</script>

slabText es un plugin sencillo, liviano y que no requiere una gran configuración, muy recomendable para webs con un porcentaje de texto importante y con pocas imágenes, en donde una correcta organización y distribución tipográfica marca la diferencia entre una web normal y una web visualmente muy atractiva.

Web: slabText

Pablo: Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.
Entradas relacionadas