Textos que llenan el viewport con independencia de su ratio 5.6.14
Cómo lograr que un texto cubra o rellene la ventana con independencia de la relación de aspecto del viewport
Textos que llenan el viewport con independencia de su ratio
Ayer mi timeline de twitter se llenó con una consulta de Ana Tudor más conocida en esa red social como @thebabydino.
En ella planteaba la cuestión de cómo, con puro Css, hacer que un texto rellene el viewport sin importar su relación de aspecto.
Y esa me la sabía, en parte, porque ya lo estoy utilizando en el tema actual del blog en los títulos de los artículos.
How would you go about making the same amount of text fill the viewport, no matter what aspect ratio?
— Ana Tudor (@thebabydino) junio 5, 2014
La mayoría de sugerencias indicaban el uso de las unidades vw | vh. Y alguna otra respuesta añadía el uso de la función calc(). Pero eso tiene sus peligros, advertidos por la misma Ana Tudor en la conversación:
@StuRobson Viewport units were my first attempt, but it breaks for an aspect ratio that's radically different from the original test one.
— Ana Tudor (@thebabydino) June 5, 2014
Viewport units, sí, pero cuál
Hace ya mucho (2 años) que en el blog presenté las unidades relativas al tamaño de la ventana o viewport.
Este grupo engloba a 4 valores posibles basados en la anchura y/o altura del viewport:
- vw
- Igual a 1% de la anchura del bloque de contención inicial.
- vh
- Igual a 1% de la altura del bloque de contención inicial.
- vmax
- Igual al 1% de la mayor de "vw" o "vh".
- vmin
- Igual al 1% de la más pequeña de "vw" o "vh".
El bloque de contención inicial es la superficie usada por el navegador para mostrar la página (barras, marcos y otros elementos no cuentan). En los dispositivos móviles coincide con el tamaño de la pantalla.
En el caso que nos ocupa está claro que las tres primeras no nos sirven. Sólo la última: vmin.
@thebabydino vmin You can see on the title of the articles on my blog. Like here: http://t.co/mT7sCYqgvd
— Kseso? (@Kseso) June 5, 2014
Pero como aquí en el blog tenemos una máxima que viene a decir que Sin demo es un dragón
realice este pen ilustrativo:
Te enlazo a él y no lo inserto porque en el blog los tuits se formatean y se pierde el efecto.
Sin embargo así tal cual está, sin usar @medias queries para terminar de pulir, la solución usando la unidad vmin flojea. Y ni que decir tiene que habrá que ajustar el valor para cada realización. Dependiendo de múltiples variables. Como la tipografía elegida, la cantidad de texto...
Una variante: calc(vw + vh)
Otro usuario de codepen, CrocoDillon, presentó otra realización un poco más imaginativa. Él emplea la función de Css calc
para poder usar conjuntamente las unidades vw y vh.
See the Pen Mixing vw and vh in font-size by CrocoDillon (@CrocoDillon) on CodePen.
Si lo observas con detenimiento y lo sometes a reescalado verás que necesitaría de la ayuda de algunas @media queries pues hay momentos en los que el texto queda fuera de la ventana.
Una carencia en las propiedades Css
Por casos como el que nos ocupa me reafirmo en una idea que ya he manifestado más veces:/p>
Creo que en las especificaciones Css faltas dos propiedades que serían de utilidad y uso seguro y que hoy es imposible conseguir de forma sencilla y directa:
max-font-size
min-font-size
Y ya que había captado momentáneamente la atención de una persona como Ana Tudor y dado el peso que hoy tiene en la comunidad web, pues aproveché la ocasión:
@Kseso Totally agree with that, though I can handle two media queries for this.
— Ana Tudor (@thebabydino) junio 5, 2014
Adenda: todo sea por la causa xD
@Kseso @CrocoDillon agreed, max/min font size would be sweet.
— Chris Coyier (@chriscoyier) June 6, 2014
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Funciona y es genial, y si lo coloco en un iframe calcula todo el espacio y no desde el espacio del iframe
ResponderEliminar¿seré el único ?