Neste artigo vamos tratar sobre as novas características de CSS para construção automática de textos em colunas, que se encontrarão disponíveis quando CSS 3 se implemente finalmente nos navegadores. Embora tudo isto não passe de um estado experimental, o certo é que já podemos começar a prová-lo e utilizar em navegadores modernos, como muitas das novas possibilidades que estamos comentando sobre CSS 3

Numerosas publicações constroem o texto em diversas colunas, como critério de desenho e para facilitar a leitura. Poderíamos imaginar o texto dos jornais se não se encontrasse dividido em diversas colunas, não seria quase impossível seguir as linhas para fazer uma leitura cômoda da informação se tudo estivesse em uma única coluna?

Este problema não o encontramos geralmente nas páginas web, porque o texto que cabe no corpo da página não é tão grande como o que caberia em uma folha de um diário. Ademais, geralmente a própria página já se encontra dividida em diversas colunas. Não obstante, mesmo que quiséssemos, com as características de CSS 2 não seria muito fácil fazer um texto fluído que se adaptasse automaticamente em colunas, de modo que estas crescerão homogeneamente à medida que o texto cresce ou se reduz. CSS 3 soluciona este problema, ou melhor, oferecerá uma solução ao mesmo, simples e automática.

Para criar uma estrutura multi-coluna utilizaremos vários atributos, que servirão para modelizar as colunas:

• colum-width: servirá para definir a largura das distintas colunas a criar.
• column-gap: nos permitirá definir o espaço em branco entre colunas.
• column-rule: servirá para criar um filete ou linha divisória entre as colunas.

Estas etiquetas, até o momento, nenhum navegador as suporta. Entretanto, Safari, Google Chrome e Firefox já implementam o multicolumna, de maneira experimental e até que as especificações de CSS 3 estejam dispostas para incorporar nos navegadores. Para isso, podemos utilizá-las se colocarmos um pré-fixo, que seria "-moz-" no caso de Firefox e "-webkit-" para o navegador Safari ou Chrome.

Um exemplo de multicolumna, para que funcione nestes navegadores seria:

.multicoluna{
   -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;
}

Outra possibilidade para criar um multicolumna será definir simplesmente o número de colunas que quisermos incorporar no texto, por meio do atributo column-count, desta maneira:

.multicoluna5colunas{
   -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 o número de colunas é talvez mais cômodo, porém em páginas fluídas pode funcionar pior, porque não se sabe com certeza que largura vai ter o lugar onde se mostram os textos e portanto, algumas vezes podem ficar colunas muito largas e outras muito estreitas.

Podemos ver uma página à parte com os exemplos mostrados de construção em múltiplas colunas. Porém, lembre que só funcionará em Mozilla Firefox, Apple Safári e Google Chrome.

O sistema de múltiplas colunas se encontra em fase beta e faz parte de um módulo à parte dentro das especificações de CSS 3. Se se deseja encontrar mais informação sobre o tema na W3C se pode consultar a URL http://www.w3.org/TR/css3-multicol/

Esperamos que estas características de CSS 3 se encontrem rapidamente disponíveis, pois não cabe dúvida que a distribuição por colunas nos abrirá novas e interessantes possibilidades para a construção de textos em páginas web.