Textos em colunas

Introdução

Continuando a sequência de artigos sobre CSS 3, veremos agora um recurso que permite a disposição de um texto em várias colunas, de forma semelhante à disposição de um jornal. Trata-se do módulo Multi-column Layout Module (Módulo para Leiaute de Múltiplas Colunas).

O principal benefício deste recurso é facilitar a leitura de um texto que está em um espaço relativamente largo da página (pode ser um "DIV", ou outro elemento qualquer). Atualmente, usuários da Web utilizam as mais variadas resoluções de tela (exemplos: 800x600, 1024x768, 1280x800, etc.) e, dependendo do estilo de layout do site, pode ocorrer de uma região ficar muito larga. De fato, um layout de largura fixa (ou seja, que não aumenta ou diminui a largura de acordo com a resolução ou tamanho da fonte) permite a elaboração de efeitos bastante atrativos visualmente, embora em muitos casos prejudique a acessibilidade. Por outro lado, um layout elástico (que expande ou reduz de acordo com a resolução da tela ou do tamanho da fonte) pode ser mais acessível, mas também pode propiciar o aparecimento de regiões muito largas com texto. Acompanhar a leitura de uma linha muito grande horizontalmente é um tanto quanto "desagradável" para alguns usuários, por isso separar estes textos em colunas com largura menor pode facilitar bastante a leitura.

---

Como funciona?

Basicamente, podemos especificar as colunas de duas maneiras: (i) definindo a largura desejada para as colunas, ou (ii) definindo o número de colunas desejadas.

Definindo um tamanho fixo de coluna, o navegador cria N colunas de acordo com o espaço reservado para elas. Por exemplo, se usamos uma resolução de 800x600, então temos a disposição 800px de largura. Se especificarmos que cada coluna terá 300px, então conseguiremos apenas 2 colunas. Note que também podemos definir um espaço entre as colunas, para que fique notável onde termina uma coluna e começa outra.

Definindo um número de colunas, o navegador determina a largura de cada coluna de acordo com o espaço reservado. Se temos 800px de largura disponível e queremos 3 colunas, cada uma com 10px de espaço entre elas, então cada coluna terá 260px. Ou seja: 260px + 10px + 260px + 10px + 260px = 800px.

---

Propriedades

column-width - É usada para especificar a largura das colunas. Pode valer "auto", caso deseja-se especificar as colunas pela quantidade (column-count).

column-count - É usada para especificar a quantidade de colunas desejada. Pode valer "auto", caso deseja-se especificar as colunas pela largura individual (column-width).

columns - É uma forma abreviada para se especificar a largura e a quantidade de colunas (column-width e column-count respectivamente).

column-gap - É usada para especificar a distância entre as colunas, caso elas existam. Em geral, recomenda-se usar o valor 1em, ou seja, a largura de um caractere.

---

As colunas também aceitam "rules", que são os estilos de separação de colunas. Elas aceitam os mesmos estilos de bordas de elementos. Por exemplo, uma linha pontilhada. Para definir as regras destes separadores, são usadas as seguintes propriedades:

column-rule-color - Especifica a cor do separador.

column-rule-style - Especifica o estilo de separador (solid, dotted, dashed, inset ou outset).

column-rule-width - Especifica a largura do separador.

column-rule - É uma forma abreviada para especificar a largura, estilo e cor de um separador, assim como a propriedade "border".

---

Existe um conceito importante para se definir em um layout de texto em múltiplas colunas, que são as quebras automáticas. Por exemplo, podemos forçar que os elementos de título (H1, H2, H3, etc) sempre fiquem em uma nova coluna. As propriedades são semelhantes às definidas no CSS 2.1, sobre "page breaks". Para definir as regras de quebra automática, são usadas as seguintes propriedades:

break-before - Especifica um tipo de quebra antes de um elemento.

break-after - Especifica um tipo de quebra após um elemento.

break-inside - Especifica um tipo de quebra dentro de um elemento.

Estas propriedades podem assumir os seguintes valores:

• auto - não força nem proibe a quebra antes ou depois do elemento.
• always - sempre força a quebra antes ou depois do elemento.
• avoid - evita a quebra antes ou depois do elemento.
• left - força que o elemento fique em uma página da esquerda.
• right - força que o elemento fique em uma página da direita.
• page - força a quebra de página antes ou dpois do elemento.
• column - força a quebra de coluna antes ou depois do elemento.
• avoid-page - evita a quebra de página antes ou depois do elemento.
• avoid-column - evita a quebra de coluna antes ou depois do elemento.

Por exemplo, podemos desejar que um elemento de título tenha "break-before: column", para especificar que ele sempre tenha uma quebra de coluna antes, ou seja, ele sempre estará no topo de uma nova coluna. Ou definir "break-after: avoid-column" para evitar que um título fique no final de uma coluna, sendo que o texto (conteúdo) só estará na próxima coluna.

---

Para especificar que um elemento atravessará múltiplas colunas, usamos a propriedade column-span. Ela pode valer "1" (para indicar que o elemento não vai atravessar por múltiplas colunas) ou "all" (para indicar que o elemento vai atravessar por múltiplas colunas). Em geral, podemos usar esta propriedade para títulos ou imagens.

---

Existe também a propriedade column-fill, que define quanto de conteúdo as colunas poderão ter. Os valores podem ser "auto" (para distribuir o conteúdo sequencialmente) ou "balance" (para balancear o conteúdo entre as colunas, caso seja possível).

---

Observações

No Firefox, as propriedades estão disponíveis com o prefixo "-moz-", por exemplo "-moz-column-width". Já no Chrome, as propriedades estão disponíveis com o prefixo "-webkit-", por exemplo "-webkit-column-width".