Las palabras mágicas
Con HTML5 y CSS3 se pueden crear textos en columnas de una manera muy sencilla, pudiendo configurar tanto el espacio existente entre las columnas como las líneas de separación entre columnas.
Para ello utilizamos el siguiente código CSS3:
Con column-count definimos el número de columnas en las que queremos dividir el texto.
Con column-gap definimos el espacio (en píxeles) que existirá como mínimo entre las columnas.
column-rule:4px dotted gray;
Con column-rule definimos tres características de las líneas de separación: el grosor, el tipo de línea y por último el color de estas líneas de separación.
Ejemplo práctico paso a paso
Para ver cómo utilizar el código CSS3 vamos a construir un ejemplo práctico paso a paso .
1. Escribimos el texto que irá en columnas
Este texto puede ser un párrafo muy largo o bien una lista de palabras. En este ejemplo se trata de una muy interesante lista resumida de los reyes godos del reino visigodo a partir de Ataúlfo y queremos mostrarla en 4 columnas.
Lo primero que tenemos que hacer es escribir lo que irá en columnas dentro de un <div> que en este caso tendrá un id="columnas":
<div id="columnas">
<li>Ataúlfo</li>
<li>Sigerico</li>
<li>Walia</li>
<li>Teodoredo</li>
<li>Turismundo</li>
<li>Teodorico</li>
<li>Eurico</li>
<li>Alarico II</li>
<li>Gesaleico</li>
<li>Amalarico</li>
<li>Teudis</li>
<li>Teudiselo</li>
<li>Agila I</li>
<li>Atanagildo</li>
<li>Liuva</li>
<li>Leovigildo</li>
</div>
Hay que comentar que hemos eliminado la etiqueta <ul> y </ul> (que agruparían los diferentes <li>) con el objetivo de que no se descuadren las columnas (ya que sino el primer dato quedaría vacío). Si se desea añadir estas etiquetas, el primer <ul> se debería ubicar fuera del <div> (por ejemplo en la línea anterior).
2. Indicamos las características de las columnas
Seguidamente el código que indicará el número de columnas, la separación y el tipo de separadores irán en el espacio reservado para el código CSS (ya sea en un fichero externo o dentro del mismo html), siempre haciendo referencia al <div> con el id llamado 'columnas':
#columnas{
column-count:4;
column-gap:20px;
column-rule:4px dotted gray;
}
Antes de ver el resultado, vamos a comentar los 3 atributos utilizados:
column-count: Indica el número de columnas que se van a crear.
column-gap: Indica el espacio (expresado en píxeles) que existirá como mínimo entre columnas.
column-rule: Hace referencia a la línea separadora que hay entre las columnas y contiene 3 valores ('grosor de la línea', 'el tipo de separador' y 'su color').
El resultado de las columnas es el siguiente:
Ataúlfo
Sigerico
Walia
Teodoredo
Turismundo
Teodorico
Eurico
Alarico II
Gesaleico
Amalarico
Teudis
Teudiselo
Agila I
Atanagildo
Liuva I
Leovigildo
Si queremos que no aparezcan las bolitas delante de cada término podemos añadir al ćodigo CSS el atributo list-style: none;:
#columnas{
column-count:4;
column-gap:20px;
column-rule:4px double black;
list-style: none;
}
Quedando el siguiente resultado:
Ataúlfo
Sigerico
Walia
Teodoredo
Turismundo
Teodorico
Eurico
Alarico II
Gesaleico
Amalarico
Teudis
Teudiselo
Agila I
Atanagildo
Liuva I
Leovigildo
Tipos de líneas
Los siguientes tipos de líneas hacen referencia tanto a los tipos de línea de separadores entre columnas, como a las líneas que forman los bordes al utilizar las etiquetas 'border' o border-radius' (tratados en el tema 'Bordes y bordes redondeados'), que únicamente tienen 3 tipos de líneas menos.
En lo referente a los tipos de separadores entre columnas de texto existen las siguientes posibilidades:
- none: sin línea separadora.
- solid: línea sólida.
- dotted: línea punteada.
- dashed: línea discontinua (segmentos cortos de línea).
- double: doble línea paralela.
- groove: línea en relieve 3D hacia adentro.
- ridge: línea en relieve 3D hacia afuera.
- inset: linea con el color en bajorelieve.
- outset: línea que simula el relieve.
A partir del siguiente código básico, vamos a mostrar el resultado de cada uno de estos valores, modificando únicamente el valor en rojo:
column-rule:6px double gray;
Solid:
Ataúlfo
Sigerico
Walia
Teodoredo
Turismundo
Teodorico
Eurico
Alarico II
Gesaleico
Amalarico
Teudis
Teudiselo
Agila I
Atanagildo
Liuva I
Leovigildo
Dotted:
Ataúlfo
Sigerico
Walia
Teodoredo
Turismundo
Teodorico
Eurico
Alarico II
Gesaleico
Amalarico
Teudis
Teudiselo
Agila I
Atanagildo
Liuva I
Leovigildo
Dashed:
Ataúlfo
Sigerico
Walia
Teodoredo
Turismundo
Teodorico
Eurico
Alarico II
Gesaleico
Amalarico
Teudis
Teudiselo
Agila I
Atanagildo
Liuva I
Leovigildo
Double:
Ataúlfo
Sigerico
Walia
Teodoredo
Turismundo
Teodorico
Eurico
Alarico II
Gesaleico
Amalarico
Teudis
Teudiselo
Agila I
Atanagildo
Liuva I
Leovigildo
Groove:
Ataúlfo
Sigerico
Walia
Teodoredo
Turismundo
Teodorico
Eurico
Alarico II
Gesaleico
Amalarico
Teudis
Teudiselo
Agila I
Atanagildo
Liuva I
Leovigildo
Ridge:
Ataúlfo
Sigerico
Walia
Teodoredo
Turismundo
Teodorico
Eurico
Alarico II
Gesaleico
Amalarico
Teudis
Teudiselo
Agila I
Atanagildo
Liuva I
Leovigildo
Inset:
Ataúlfo
Sigerico
Walia
Teodoredo
Turismundo
Teodorico
Eurico
Alarico II
Gesaleico
Amalarico
Teudis
Teudiselo
Agila I
Atanagildo
Liuva I
Leovigildo
Outset:
Ataúlfo
Sigerico
Walia
Teodoredo
Turismundo
Teodorico
Eurico
Alarico II
Gesaleico
Amalarico
Teudis
Teudiselo
Agila I
Atanagildo
Liuva I
Leovigildo
Compatibilidad con todos los navegadores
Como los diferentes navegadores todavía no han podido ponerse de acuerdo en una sintaxis compartida por todos, el código referido a las columnas lo tenemos que repetir, anteponiendo los tres prefijos que agrupan a los diferentes tipos de navegadores:
- -webkit-: para integrar a los navegadores Chrome y Safari.
- -moz-: que identifica a Firefox.
- -o-: para contemplar también al navegador Opera.
- -ms-: para contemplar a las versiones modernas de Internet Explorer.
Así, el código de las columnas optimizado para todos los navegadores que aceptan HTML5 quedaría de la siguiente manera:
#columnas{
column-count:4;
column-gap:20px;
column-rule:4px double black;
line-style:none;
-webkit-column-count:4;
-webkit-column-gap:20px;
-webkit-column-rule:4px double black;
-moz-column-count:4;
-moz-column-gap:20px;
-moz-column-rule:4px double black;
-o-column-count:4;
-o-column-gap:20px;
-o-column-rule:4px double black;
-ms-column-count:4;
-ms-column-gap:20px;
-ms-column-rule:4px double black;
}
Con este código (casi) todos los navegadores que aceptan HTML5 podrán entender lo mismo y ofrecer (casi) el mismo resultado.