Unos de los aspectos más importantes ¿el más importante? del diseño editorial, o del diseño gráfico en general, es el buen uso del espacio. Sobre la superfície del papel, se usan divisiones, retículas, que ayudan a componer una página y sobre dicha retícula hacemos fluir cajas de texto con columnas.
Reticular el espacio es lo primero que debemos aprender cuando estudiamos diseño. La relación de los elementos de una página (masas tipográficas, imágenes, espacios vacíos, color, textura…) viene dada por dicha retícula. Uno de los aspectos que busca una retícula en una página, óbviamente, es la buena distribución de cajas de texto.
500 años atras, los libros tenían columnas, pero ahora, en web…
Un artículo de A list Apart de 2005 ya hablaba de la necesidad del uso de multicolumnas. Parece que no ha habido, desde entonces, gran evolución. ¿o si?
Nos acercamos un poco.
En el contexto del diseño web, empezamos a tener herramientas de trabajo que nos acercan a la cultura del diseño editorial. Un ejemplo interesante son una seria ideas apuntadas en las recomendacions del W3C sobre el modelo de layout multicolumna donde es posible definir en una sola caja de texto una o varias columnas donde el texto fluye.
No se trata de una implementación de CSS “normativa” sino de una recomendación todavía en estado prueba o lo que es lo mismo, un “Working Draft in the CSS Working Group”
Las ventajas de este sistema, tal y como el texto introductorio del artículo del W3C explica, son una manera mucha mas flexible de trabajo respecto a las antiguas TABLAS y los actuales DIVS:
“The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport.”
Aquí, hemos montado una simple página con varias cajas y varias divisiones usando columnas y espacios entre columna. Los navegadores modernos podrán ver este ejemplo de multicolumnas de 1, 2 y 3 columnas por caja.
Lamentablemente, este ejemplo no podrá verse en Explorar, donde veremos todo el texto en una sola columna.
El código usado en la hoja de estilos CSS es básicamente este:
.multicolumna{
-moz-column-count: 3; // núm. columnas
-moz-column-gap: 2em; // esp. entre columnas
-moz-column-rule: 1px solid #ccf; // borde de columna
-webkit-column-count: 3; // núm. columnas
-webkit-column-gap: 2em; // esp. entre columnas
-webkit-column-rule: 1px solid #ccf; // borde de columna
}
La versiones 8 de Chome, 5 de Safari y 3.6 de Mozilla Firefox dibujarán perfectamente el siguiente ejemplo multicolumna.