Columnas de texto

Profesores:JAB y Ester Torres

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:

column-count:2;
Con column-count definimos el número de columnas en las que queremos dividir el texto.

column-gap:10px;
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:
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:

    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:

    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.