Textos multi-columna con CSS 3

En este artículo vamos a tratar sobre las nuevas características de CSS para maquetación automática de textos en columnas, que se encontrarán disponibles cuando CSS 3 se implemente finalmente en los navegadores. Aunque todo esto no pase de un estado experimental, lo cierto es que ya podemos empezar a probarlo y utilizar en navegadores modernos, como muchas de las nuevas posibilidades que estamos comentando sobre CSS 3

Numerosas publicaciones maquetan el texto en diversas columnas, como criterio de diseño y para facilitar la lectura. Podríamos imaginarnos el texto de los periódicos si no se encontrase dividido en diversas columnas ¿no sería casi imposible seguir las líneas para hacer una lectura cómoda de la información si todo estuviera en una única columna?

Este problema no lo encontramos generalmente en las páginas web, porque el texto que cabe en el cuerpo de la página no es tan grande como el que cabría en una hoja de un diario. Además, generalmente la propia página ya se encuentra dividida en diversas columnas. No obstante, aunque quisiéramos, con las características de CSS 2 no sería muy fácil hacer un texto fluído que se adaptase automáticamente en columnas, de modo que éstas crecieran homogéneamente a medida que el texto crece o se reduce. CSS 3 soluciona este problema, o más bien ofrecerá una solución al mismo, sencilla y automática.

Para crear una estructura multi-columna utilizaremos varios atributos, que servirán para modelizar las columnas:

• colum-width: servirá para definir la anchura de las distintas columnas a crear.
• column-gap: nos permitirá definir el espacio en blanco entre columnas.
• column-rule: servirá para crear un filete o línea divisoria entre las columnas.

Estas etiquetas por el momento no las soporta tal cual ningún navegador. Sin embargo Safari, Google Chrome y Firefox ya implementan el multicolumna, de manera experimental y hasta que las especificaciones de CSS 3 estén dispuestas para incorporar en los navegadores. Para ello, podemos utilizarlas si les ponemos un prefijo, que sería "-moz-" en el caso de Firefox y "-webkit-" para el navegador Safari o Chrome.

Un ejemplo de multicolumna, para que funcione en estos navegadores sería:

.multicolumna{

   -moz-column-width: 15em;

   -moz-column-gap: 15px;

   -webkit-column-width: 15em;

   -webkit-column-gap: 15px;

   -webkit-column-rule: 1px solid #ccc;

   -moz-column-rule: 1px solid #ccc;

}

Otra posibilidad para crear un multicolumna será definir simplemente el número de columnas que querríamos incorporar en el texto, por medio del atributo column-count, de esta manera:

.multicolumna5columnas{

   -moz-column-count: 5;

   -moz-column-gap: 2em;

   -moz-column-rule: 1px solid #ccf;

   -webkit-column-count: 5;

   -webkit-column-gap: 2em;

   -webkit-column-rule: 1px solid #ccf;

}

Especificar el número de columnas es quizás más cómodo, pero en páginas fluidas puede funcionar peor, porque no se sepa con certeza qué anchura va a tener el lugar donde se muestran los textos y por tanto unas veces queden columnas muy anchas y otras muy estrechas.

Podemos ver una página aparte con los ejemplos mostrados de maquetación en múltiples columnas. Pero recordad que sólo funcionará en Mozilla Firefox, Apple Safari y Google Chrome.

El sistema de múltiples columnas se está encuentra en estado de borrador y forma parte de un módulo aparte dentro de las especificaciones de CSS 3. Si se desea encontrar más información sobre el tema en la W3C se puede consultar la URL http://www.w3.org/TR/css3-multicol/

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información