Programación 

Textos multi-columna con CSS 3

CSS 3 incorpora nuevos atributos para que el navegador se encargue de producir texto multicolumna, es decir, que maquete directamente el texto en varias columnas sin tener que hacer nosotros nada.

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.

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/

Related posts