<![CDATA[vieron.log]]> 2011-10-10T16:34:43+02:00 http://vieron.github.com/blog/ Octopress <![CDATA[Columnas Justificadas en CSS]]> 2011-09-28T00:16:00+02:00 http://vieron.github.com/blog/blog/2011/09/28/columnas-justificadas-en-css Hace unos meses, se me metió entre ceja y ceja que tenía que existir alguna manera cross-browser de conseguir columnas justificadas en CSS sin tener que dar anchos ni márgenes. La idea era tratar a las columnas como elementos inline (inline-block, en este caso) y aplicar un text-align:justify al contenedor.

Primer problema

El text-align: justify; justifica todo excepto la última línea (fila, en este caso). En la práctica estos son los dos casos que no se justifican:

  1. Si tienes una sola fila.

  1. La última fila, si tienes múltiples filas.

Empiezo a buscar y me entero que esta técnica se conoce como “Ben Justification”. Encuentro diferentes artículos para solucionarlo (aplicado a texto), pero lo hacen añadiendo marcado extra (<span>&nbsp;</span>) al final del bloque de texto, lo cual no me parece una opción.

En la w3c ya se puede ver en el draft del módulo de texto de CSS3, la propiedad text-align-last. Admite los valores auto | start | end | left | right | center | justify donde justify sería el que nos interesaría, pero por desgracia, a día de hoy esto no esta implementado en los navegadores.

Para Internet Explorer, de la versión 5 en adelante, tenemos la propiedad text-justify con el valor distribute-all-lines que nos permite hacer justo lo que queremos. Del 8 en adelante, la propiedad se usa como una extensión de CSS (con prefijo -ms-), me imagino que será porque esta propiedad aparece ya en las specs de CSS3.

En principio podríamos usarla así:

1
2

-ms-text-justify: distribute-all-lines; /* IE8+ */
text-justify: distribute-all-lines; /* IE5+ */

Por tanto tenemos cubierto todo el rango de versiones de Internet Explorer usadas actualmente, lo cual mola, pero nos quedan el resto (Chrome, Safari, Firefox…). Lo primero que pensé después de ver los artículos sobre “Ben Justification” fue que en los navegadores modernos ese marcado extra que se añadía, podría reemplazarse usando el pseudo-elemento :after.

1
2
3
4
5
6
7
8
9

  .grid:after {
    content: '.';
    font-size: 1px;
    word-spacing: 100%;
    display: -moz-inline-stack;
    display: inline-block;
    width: 100%;
    visibility: hidden;
  }

Conseguiríamos tener algo como esto:



Inconvenientes

  1. Si hay desigualdad entre el número de elementos que entran en cada fila, el comportamiento no suele ser el necesitado.

  1. El elemento generado con el :after hace que haya un espacio después de la última fila, que he conseguido reducir con un line-height:0;, pero no eliminar. Esto muchas veces no tiene porque ser un problema, pero si tienes un fondo de color como en el ejemplo, quizás si lo sea.

Solución final

Como a partir de Internet Explorer 8 ya se soportan los pseudo-elementos :after y :before, he evitado usar el -ms-text-justify, para que no se apliquen ambas soluciones.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.grid {
  text-align:justify;
  text-justify: distribute-all-lines;
  line-height:0;
 }

.grid:after {
  content: '.';
  font-size: 1px;
  word-spacing: 100%;
  display: -moz-inline-stack;
  display: inline-block;
  width: 100%;
  visibility: hidden;
}

.col {
  display: -moz-inline-stack;
  display: inline-block;
  *display:inline;
  vertical-align:top;
  zoom:1;
  text-align:left;
}

Para terminar

  • Es un patrón bastante común, y se puede usar para estructurar a todos los niveles.
  • La gran ventaja de este patrón es su flexibilidad, no tener que establecer anchos ni márgenes de separación entre elementos, es una gran win.
  • De momento esta es la mejor solución que he encontrado, pero seguro que se puede mejorar.

Referencias:

]]>