soy Kseso y esto EsCSS

Textos que llenan el viewport con independencia de su ratio

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

xPor Kseso ✎ 1
Textos que llenan el viewport con independencia de su ratio puro Css

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.

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:

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.

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:

Ver demo a full

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:

Adenda: todo sea por la causa xD

avatar del Editor del blog

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 Don Kseso Kseso

Comentarios: 1

  1. Funciona y es genial, y si lo coloco en un iframe calcula todo el espacio y no desde el espacio del iframe
    ¿seré el único ?

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap