blog banner

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 […]

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus urna sit amet neque pretium tristique commodo sem ullamcorper. Phasellus eu sollicitudin augue. Aenean sapien libero, scelerisque eu cursus et, luctus eget nisl. Nulla vitae nulla sed lacus rhoncus dignissim ac non libero. Phasellus non urna nisl, nec mattis odio. Sed ultrices, dolor a accumsan iaculis, quam nisl ornare lacus, sed venenatis est urna eu odio. Nunc at turpis enim.
Cras eleifend laoreet pellentesque. Cras pellentesque varius velit ut semper. Vestibulum ullamcorper risus et enim faucibus nec interdum diam venenatis. Pellentesque sollicitudin cursus magna a vulputate. Mauris rutrum facilisis magna a viverra. Nullam quis magna eu lectus pretium vehicula. Phasellus malesuada consequat nisi, et elementum nunc posuere ac. Etiam neque turpis, adipiscing non viverra id, pharetra id risus. Pellentesque vel diam sem. Suspendisse potenti. Vestibulum porta metus erat, vel porta nisi.
Donec et orci odio, id lacinia dui. Donec feugiat, nisl sed porttitor tempor, tortor orci tristique enim, nec cursus augue arcu et magna. Fusce eleifend vehicula tortor a iaculis. Vestibulum id turpis sed purus facilisis sollicitudin. Nulla ultricies mi quis urna adipiscing ut ornare nisl convallis. Nulla in facilisis nisl. Donec quis felis nibh. Praesent ipsum augue, faucibus at vulputate non, tempor a tellus. Sed posuere dignissim dapibus. Phasellus ac faucibus sapien. Phasellus hendrerit velit et leo ultricies vulputate.

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus urna sit amet neque pretium tristique commodo sem ullamcorper. Phasellus eu sollicitudin augue. Aenean sapien libero, scelerisque eu cursus et, luctus eget nisl. Nulla vitae nulla sed lacus rhoncus dignissim ac non libero. Phasellus non urna nisl, nec mattis odio. Sed ultrices, dolor a accumsan iaculis, quam nisl ornare lacus, sed venenatis est urna eu odio. Nunc at turpis enim.
Cras eleifend laoreet pellentesque. Cras pellentesque varius velit ut semper. Vestibulum ullamcorper risus et enim faucibus nec interdum diam venenatis. Pellentesque sollicitudin cursus magna a vulputate. Mauris rutrum facilisis magna a viverra. Nullam quis magna eu lectus pretium vehicula. Phasellus malesuada consequat nisi, et elementum nunc posuere ac. Etiam neque turpis, adipiscing non viverra id, pharetra id risus. Pellentesque vel diam sem. Suspendisse potenti. Vestibulum porta metus erat, vel porta nisi.
Donec et orci odio, id lacinia dui. Donec feugiat, nisl sed porttitor tempor, tortor orci tristique enim, nec cursus augue arcu et magna. Fusce eleifend vehicula tortor a iaculis. Vestibulum id turpis sed purus facilisis sollicitudin. Nulla ultricies mi quis urna adipiscing ut ornare nisl convallis. Nulla in facilisis nisl. Donec quis felis nibh. Praesent ipsum augue, faucibus at vulputate non, tempor a tellus. Sed posuere dignissim dapibus. Phasellus ac faucibus sapien. Phasellus hendrerit velit et leo ultricies vulputate.

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:

.miTexto{column-rule: 1px dotted #8A0000;}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus urna sit amet neque pretium tristique commodo sem ullamcorper. Phasellus eu sollicitudin augue. Aenean sapien libero, scelerisque eu cursus et, luctus eget nisl. Nulla vitae nulla sed lacus rhoncus dignissim ac non libero. Phasellus non urna nisl, nec mattis odio. Sed ultrices, dolor a accumsan iaculis, quam nisl ornare lacus, sed venenatis est urna eu odio. Nunc at turpis enim.
Cras eleifend laoreet pellentesque. Cras pellentesque varius velit ut semper. Vestibulum ullamcorper risus et enim faucibus nec interdum diam venenatis. Pellentesque sollicitudin cursus magna a vulputate. Mauris rutrum facilisis magna a viverra. Nullam quis magna eu lectus pretium vehicula. Phasellus malesuada consequat nisi, et elementum nunc posuere ac. Etiam neque turpis, adipiscing non viverra id, pharetra id risus. Pellentesque vel diam sem. Suspendisse potenti. Vestibulum porta metus erat, vel porta nisi.
Donec et orci odio, id lacinia dui. Donec feugiat, nisl sed porttitor tempor, tortor orci tristique enim, nec cursus augue arcu et magna. Fusce eleifend vehicula tortor a iaculis. Vestibulum id turpis sed purus facilisis sollicitudin. Nulla ultricies mi quis urna adipiscing ut ornare nisl convallis. Nulla in facilisis nisl. Donec quis felis nibh. Praesent ipsum augue, faucibus at vulputate non, tempor a tellus. Sed posuere dignissim dapibus. Phasellus ac faucibus sapien. Phasellus hendrerit velit et leo ultricies vulputate.

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: 2;}

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

Mi titulo de ejemplo multicolumna debe ocupar todas las columnas

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus urna sit amet neque pretium tristique commodo sem ullamcorper. Phasellus eu sollicitudin augue. Aenean sapien libero, scelerisque eu cursus et, luctus eget nisl. Nulla vitae nulla sed lacus rhoncus dignissim ac non libero. Phasellus non urna nisl, nec mattis odio. Sed ultrices, dolor a accumsan iaculis, quam nisl ornare lacus, sed venenatis est urna eu odio. Nunc at turpis enim.
Cras eleifend laoreet pellentesque. Cras pellentesque varius velit ut semper. Vestibulum ullamcorper risus et enim faucibus nec interdum diam venenatis. Pellentesque sollicitudin cursus magna a vulputate. Mauris rutrum facilisis magna a viverra. Nullam quis magna eu lectus pretium vehicula. Phasellus malesuada consequat nisi, et elementum nunc posuere ac. Etiam neque turpis, adipiscing non viverra id, pharetra id risus. Pellentesque vel diam sem. Suspendisse potenti. Vestibulum porta metus erat, vel porta nisi.
Donec et orci odio, id lacinia dui. Donec feugiat, nisl sed porttitor tempor, tortor orci tristique enim, nec cursus augue arcu et magna. Fusce eleifend vehicula tortor a iaculis. Vestibulum id turpis sed purus facilisis sollicitudin. Nulla ultricies mi quis urna adipiscing ut ornare nisl convallis. Nulla in facilisis nisl. Donec quis felis nibh. Praesent ipsum augue, faucibus at vulputate non, tempor a tellus. Sed posuere dignissim dapibus. Phasellus ac faucibus sapien. Phasellus hendrerit velit et leo ultricies vulputate.

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.

.miTexto{column-width: 75px; }
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus urna sit amet neque pretium tristique commodo sem ullamcorper. Phasellus eu sollicitudin augue. Aenean sapien libero, scelerisque eu cursus et, luctus eget nisl. Nulla vitae nulla sed lacus rhoncus dignissim ac non libero. Phasellus non urna nisl, nec mattis odio. Sed ultrices, dolor a accumsan iaculis, quam nisl ornare lacus, sed venenatis est urna eu odio. Nunc at turpis enim.
Cras eleifend laoreet pellentesque. Cras pellentesque varius velit ut semper. Vestibulum ullamcorper risus et enim faucibus nec interdum diam venenatis. Pellentesque sollicitudin cursus magna a vulputate. Mauris rutrum facilisis magna a viverra. Nullam quis magna eu lectus pretium vehicula. Phasellus malesuada consequat nisi, et elementum nunc posuere ac. Etiam neque turpis, adipiscing non viverra id, pharetra id risus. Pellentesque vel diam sem. Suspendisse potenti. Vestibulum porta metus erat, vel porta nisi.
Donec et orci odio, id lacinia dui. Donec feugiat, nisl sed porttitor tempor, tortor orci tristique enim, nec cursus augue arcu et magna. Fusce eleifend vehicula tortor a iaculis. Vestibulum id turpis sed purus facilisis sollicitudin. Nulla ultricies mi quis urna adipiscing ut ornare nisl convallis. Nulla in facilisis nisl. Donec quis felis nibh. Praesent ipsum augue, faucibus at vulputate non, tempor a tellus. Sed posuere dignissim dapibus. Phasellus ac faucibus sapien. Phasellus hendrerit velit et leo ultricies vulputate.

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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *