Texto en columnas mediante css

NOTA: Los ejemplos en el post son html y css3 y se verán según las limitaciones del navegador del visitante.

Una interesante característica de css3 es el encolumnado automático de textos. Característica aún no implementada por Internet Explorer y con uso de prefijo obligado para el resto de navegadores, salvo Opera. Por ello, de momento se deberán contemplar alternativas para los navegadores no compatibles.

Método tradicional
Hasta ahora, para encolumnar textos se deben crear diferentes capas flotantes de manera que se ubiquen una al lado de la otra, definiendo el ancho de cada una de ellas así como el margen que las separa y controlando que el máximo no supere el ancho total disponible. En cada una de ellas se ubica el texto pertinente. No muy usable, la verdad.

Método css3
Las especificaciones de css3 permiten agregar unas propiedades de capa que nos facilitan mucho la tarea.

.miTexto{column-count: 3;}

Con esta regla css3 se indica que el contenido de la capa con clase miTexto se dispondrá en tres columnas. Simple.

También se permite manejar el espacio entre columnas mediante column-gap.

.miTexto: column-count: 3;column-gap: 40px;}

Y agregar una decoración en los espacios entre columnas mediante column-rule. Esta propiedad se compone de

column-rule-color: #8A0000;  /* color del separador */
column-rule-width: 1px; /* grosor del separador */
column-rule-style: dotted;

Esta última propiedad puede tener los siguientes valores:

• none: Sin decoración. Es la propiedad por defecto.
• hidden: Decoración oculta.
• dotted: Dibuja líneas punteadas entre las columnas.
• dashed: Dibuja líneas a base de trazos cortos entre la columnas.
• solid: Dibuja una línea entera entre columnas.
• double: Dibuja dos líneas paralelas entre columnas
• groove: Relieve en 3d hacia adentro
• ridge: Relieve en 3d hacia afuera
• inset/outset: No los he podido ver funcionar en ningún navegador. Se visualizan como las anteriores.

Estas propiedades se pueden compactar mediante column-rule:

Column-width permite indicar el ancho de las columnas, adaptando el número de columnas

Otra propiedad interesante, aunque únicamente funciona en los navegadores Opera y Chrome es column-span que permite que un elemento dentro de una capa de clase column ocupe varias columnas

.miTexto h3{column-span:all;} /* all especifica que ocupe todas las columnas con independencia del número de estas */

Otra manera de encolumnar se puede establecer mediante column-width. Esta propiedad establece el ancho fijo de la columna, y el navegador dividirá el texto en las columnas necesarias para cumplimentar el 100% del ancho del contenedor. Esta propiedad se debe establecer mediante los prefijos -moz- y -webkit- para la compatibilidad con Firefox y Chrome.

En resumen, se trata de una potente funcionalidad que da muchas facilidades a la maquetación, pero que los navegadores aún deben implementar por lo que en su uso y por el momento, se debe contemplar la alternativa con un navegador no compatible.