Text-align: Justify y RWD. Difusión del artículo de Patrick Kunka en Barrelny.com 4.6.13
Uso de la declaración text-align: justify en la creación de layouts RWD. Difusión y acercamiento en español del artículo de Patrick Kunka en Barrel
Text-align: Justify y RWD. Difusión del artículo de Patrick Kunka en Barrelny.com
Artículo de difusión de la técnica para construir layouts RWD en base a la declaración Text-align: Justify;. Artículo publicado originalmente en Barrel por Patrick Kunka.
Por lo tanto, al ser la intención dar a conocer esta forma de construir estructuras RWD basadas en Text-align: Justify;, no esperes una trducción más o menos literal y acertada. No la encontrarás. Sólo es una aproximación a esta técnica.
Y al final, como premio y novedad, un layout o framework basado en ella.
Text-align: Justify
La propiedad 'text-align' describe cómo el contenido a nivel del línea de un bloque es alineado.
En el caso de 'justify', la AU (el agente de usuario o navegador) pueden estirar las cajas a nivel de línea además de ajustar su posición.
Esta declaración ha sido utilizada ya en muchas realizaciones, especialmente con el valor center para lograr menús de navegación centrados. Pero para la distribución uniforme ocupando toda la línea horizontal con el valor justify hay un pequeño problema.
Un pequeño inconveniente o dos
Para que text-align: justify entre en funcionamiento y se justifique se necesita que haya un salto de línea. O lo que es lo mismo, la justificación se realiza en una línea una vez que se ha generado la siguiente. Lo que implica que la última estará alineada a la izquierda en la orientación LtR (y si sólo hay 1 siempre será la última). O al menos ese debe ser el comportamiento
La solución
Así que para pasar de la distribución del menú que está en la parte superior de la imagen anterior a la inferior sólo es necesario crear una segunda línea. El trazo discontinuo en morado de la imagen. El autor lo llama "elemento de corte". Al tener por declararle una anchura del 100% siempre y en cualquier situación forzará la creación de una nueva (y última) línea. Así sus hermanos precedentes se justificarán con independencia de su número o líneas que ocupen.
Este elemento se puede lograr por dos vías: incluyendo un extra en el html o de forma más limpia vía Css con un pseudoelemento. Y en ambos casos añadiendo los estilos oportunos para que ni se visualice ni cause quebrantos. Sobre ese aspecto vuelvo un poco más tarde.
Y lo que es válido en este aspecto para elementos en línea, también lo es para los declarados como inline-block. Pero teniendo en cuenta que también le afectará otras cuestiones como la alineación vertical, la separación entre caracteres o espacio blanco entre ellos...
En esta última imagen vemos otra particularidad (2º inconveniente) de la alineación justificada: el hueco central en la última fila. Se solventa más adelante.
Implicaciones para Responsive Web Design (RWD)
Normalmente los diseños RWD se basan en redes o rejillas. El espacio se distribuye en un tanto % en función del número de elementos a mostrar en cada línea. A ese cálculo hay que añadir los márgenes de separación entre ellos, necesitando muchas veces de declarar de forma redundante (para cada @media queri) varios :nth-of-type() para suprimir el margen derecho o izquierdo en el último o el primero de cada línea.
Así que declarando Text-align: Justify; en el contenedor padre y a sus hijos directos Display: inline-block; y una anchura en porcentaje no es necesario declarar márgenes laterales. Ni tampoco flotar y limpiar los floats.
El elemento de corte o "Break"
Volviendo al elemento de corte, el "break" que fuerza una última línea. Si la composición está formada por varias líneas no sería necesario. Pero por si acaso...
Generada en el html
Se añade el corte como último elemento:
<ul class="mi_clase">
<li></li>
<li></li>
<li></li>
<li class="break"></li>
</ul>
Y complementarlo con el css oportuno:
#Grid{
text-align: justify;
font-size: 0.1px; /*Nota 1*/
}
.mi_clase li{
display: inline-block;
width: 23%;
font-size: 1rem;/*O lo que necesites*/
...
}
.mi_clase .break{
width: 100%;
height: 0;
/*Otras declaraciones*/
}
Nota 1: Declarar un tamaño de la fuente en 0.1px es una de las técnicas para evitar el espacio de separación entre elementos inline-block. Y el no declarar 0px es por un bug de IE9. Se compensa en los hijos (obligatorio)
La segunda opción es utilizar un pseudoelemento y prescindir del añadido en el html. Más limpio y semántico:
.mi_clase:after{
content: '';
display: inline-block;
width: 100%;
}
Segundo inconveniente (estético)
El segundo inconveniente de usar Text-align: Justify; en la construcción de frameworks RWD tiene que ver con la distribución de los hijos en la última línea o fila. Como puedes ver en la imagen anterior en la que lo mencionaba, si el número de hijos no es un múltiplo exacto de los que se necesitan para completar la última fila, la alineación no cuadra con las precendentes.
Para solventarlos, Patrick Kunka, el autor, vuelve a recurrir a la creación de unos elementos extra. Los llama elementos "Placeholder". Son las dos líneas de trazo morado continuo en la imagen de abajo:
El número máximo de estos elementos que se necesitan es el número de cajas por fila menos 2. Y aquí si que es necesario añadirlas en el html o generarlas mediante algún lenguaje de programación. Para esto Css no tiene recursos.
Estos "Placeholder" han de ser incluidos antes del elemento de corte o "break" si se incluyo en el html. Con la misma anchura que sus hermanos las cajas principales y altura 0 para que no se muestren ni descuadren los sobrantes.
Uso con las @Media queries
Para usar las @medias queries en conjunción con esta técnica sólo es necesario declarar la anchura en cada punto de cambio. El valor justify hace el resto.
Puedes verlo en acción en este pen del autor
Ejemplos y páginas creadas con esta técnica
- Ejemplos básicos
- Ejemplos avanzados
Crédito y autoría
Una vez más, todo el crédito de lo precedente es para: Sobre Patrick Kunka
Patrick is a front-end developer at Barrel.
Otros artículos de Patrick || Patrick's bio
Justify Grid. Una nueva forma de crear layouts
Al estar con este artículo y vía twitter me llega un enlace a un framework desarrollado en base a esta técnica:
No lo he investigado en absoluto. Sólo un vistazo muy por encima a su index para ver si había alguna relación con el artículo original base del post.
Final esperando tu opinión
¿Qué te parece la idea? ¿Cómo la ves frente a tantas y tantas otras realizaciones para lograr lo mismo? Y si ya te resultaba conocida o la has usado ¿cuál fue tu experiencia con ella y qué pros y contras le pones
Y no te olvides de pasar por el artículo original. Tanto en su exposición como en los comentarios hallarás toda la información que yo he obviado en esta difusión del mismo.
Para según qué trabajo, lo veo muy bueno. Con esto me refiero a que sean como los ejemplos que expone: Elementos con misma altura y a poder ser filas con el mismo número de hijos (para evitar el 2º inconveniente).
ResponderEliminarEl mencionado, como dices, se puede solucionar con un lenguaje de programación como JS, incluso a mí que aún no lo manejo mucho se me ocurren formas. Creo que me acabas de aportar una escusa para practicar...
Una cosa: Cuando hago hover (Chrome, no he probado en otro) sobre los botones sociales (follow) me hace un efecto un poco extraño; desaparecen contenidos. Sólo me ocurre en la versión de columnas activada.
Un cordial saludo.
(Es cierto, con javascript sería relativamente fácil.)
ResponderEliminarEstaba pensando en el caso típico de la serie de imágenes. Si les damos un ancho en porcentaje ya sabemos cuantas pueden entrar por fila, y en casos personalizados aparecen algunos recursos.
Uno sería meterlas en contenedores inline-block, y al último ponerle un pseudo elemento ::after con el ancho del las que faltan para completar la fila, y al contenedor general (el de todas las imágenes) otro con el break. El punto flojo es que si falta más de una imagen, el encolumnado puede no quedar muy prolijo. ‡-P
Una solución más digna es centrar la última fila, pero para eso hay que esperar que text-align-last sea compatible (hoy no anda en Chrome ni Opera).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<style type="text/css">
body, html {text-align: justify; width: 100%; margin: 0; padding: 0;
-moz-text-align-last: center;
text-align-last: center; }
img {width: 30%; border: 2px solid black; }
</style>
</head>
<body>
<img src=http://img716.imageshack.us/img716/6495/clubdibujorosario.jpg >
<img src=http://img255.imageshack.us/img255/2057/emmaherbin.jpg >
<img src=http://img837.imageshack.us/img837/1307/judypotap.jpg >
<img src=http://img35.imageshack.us/img35/465/osvaldojalil.jpg >
<img src=http://img829.imageshack.us/img829/7145/lucreciaorloff.jpg >
</body>
</html>
Bueno, me gustan las soluciones simples y esta parece que lo es. Eso de centrar en RWD es fácil, pero siempre me lleva de cabeza.
ResponderEliminar