Cómo logramos que un menú de Webflow llene la pantalla con cualquier ancho o alto: una solución de tamaño de fuente dinámico con CSS y JavaScript, dos demos de CodePen, el código explicado y un atajo solo con CSS.
¡Hola, entusiastas de Webflow! Hoy nos metemos en un tema que nos toca de cerca: el tamaño de fuente dinámico, o cómo lograr que un tamaño de fuente se ajuste tanto al ancho como al alto del viewport. Sí, lo has leído bien. Bueno, en realidad mentimos: tuvimos que resolver un problema para un cliente. Como casi todo el contenido de la sección de tutoriales de nuestro blog, escribimos sobre lo que tuvimos que hacer para resolver algo que Webflow normalmente no resuelve de forma nativa. Como diseñadores de Webflow siempre queremos mantenernos lo más cerca posible del no-code, pero a veces hay que pasarse al low-code.
El reto
Pongamos el escenario. Tienes un proyecto de Webflow. Tienes un menú (no tiene por qué ser un menú, podría ser un simple encabezado, por ejemplo). En nuestro caso era un menú muy cuidado con una lista de nombres de directores y un vídeo de fondo que se reproduce al pasar el cursor por encima, y había un problema. El cliente quiere que el texto del menú ocupe el mayor ancho posible de la página, según el elemento más largo del menú. Y no puedes usar el ancho del viewport para el tamaño de fuente, porque el texto tiene que llenar el espacio según el ancho o el alto del viewport, lo que resulte menor. De lo contrario, empezarás a hacer scroll cuando el texto se desborde del viewport. Suena a reto, ¿verdad? Aquí tienes un adelanto del menú para que te hagas una idea de cómo se ajusta al cambiar el alto y el ancho de la ventana del navegador.
<div style="padding:59.63% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/850500021?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Dynamic Font Size in Webflow to Fill Width or Height"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
Pues bien, amigos, por ahí empezamos.
La solución
Entra en escena JavaScript, nuestro fiel escudero. Con una pizca de JavaScript, un toque de CSS y mucha creatividad, podemos preparar una solución que haga que el texto de nuestro menú sea lo más ancho o “alto” posible, sin importar el ancho o el alto de la pantalla. Verás que nuestra versión es un poco más complicada: los nombres y los apellidos de los directores tienen fuentes y grosores distintos, así que no pueden tener el mismo tamaño de fuente. Uno es simplemente más grande que el otro. También añadiremos un ejemplo simplificado en CodePen, con una sola fuente, para que puedas experimentar. Como el texto del menú viene de una lista de colección del CMS, nuestra guía sobre cómo crear spans de texto en elementos de texto dinámico del CMS en Webflow es un buen complemento si quieres dar estilos distintos a partes de ese texto.
Hemos incrustado a continuación dos CodePens con los scripts que vamos a usar. El primero es una versión simplificada, perfecta para quienes están empezando o tienen una sola fuente que ajustar. El segundo es algo más avanzado, un ejemplo ideal para quienes buscan un desafío, tienen varias fuentes con las que jugar o simplemente quieren ver cómo se pueden hacer cosas más avanzadas. Échales un vistazo, juega con ellos y descubre la magia que estamos a punto de crear. El código del pen debería poder editarse, para los expertos en Webflow que quieran trastear de inmediato.
El ejemplo sencillo
<iframe height="300" style="width: 100%;" scrolling="no" title="Dynamic Font Size Based on Width and Height of Viewport - Simplified for 1 Font" src="https://codepen.io/milkmoonstudio/embed/LYXMgLw?default-tab=js%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/LYXMgLw">
Dynamic Font Size Based on Width and Height of Viewport - Simplified for 1 Font</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
// Let's start by declaring our function, adjustFontSize.
function adjustFontSize() {
// We're grabbing all the elements with the class name 'menu_item'.
var menuItems = document.querySelectorAll(".menu_item");
// We're getting the width and height of the viewport.
var viewportWidth = Math.max(
document.documentElement.clientWidth || 0,
window.innerWidth || 0
);
var viewportHeight =
Math.max(
document.documentElement.clientHeight || 0,
window.innerHeight || 0
) - 60;
// We're calculating the font size based on the width and height of the viewport.
var fontSizeBasedOnWidth = viewportWidth * 0.065;
var fontSizeBasedOnHeight = viewportHeight * 0.21;
// We're taking the smaller of the two font sizes calculated.
var fontSize = Math.min(fontSizeBasedOnWidth, fontSizeBasedOnHeight);
// Now, we're going through each menu item and setting the font size.
menuItems.forEach(function (item) {
item.style.fontSize = fontSize + "px";
});
}
// We're calling our function whenever the window is resized.
window.onresize = adjustFontSize;
// We're also calling our function when the document is ready.
document.addEventListener("DOMContentLoaded", adjustFontSize);Un ejemplo más avanzado de lo que hicimos
<iframe height="300" style="width: 100%;" scrolling="no" title="Dynamic Font Size Based on Width and Height of Viewport - 2 Font Menu" src="https://codepen.io/milkmoonstudio/embed/abQPRjg?default-tab=js%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/abQPRjg">
Dynamic Font Size Based on Width and Height of Viewport - 2 Font Menu</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
El desglose
Ahora vamos a desmenuzar estos scripts como si fueran pasos de baile de moda.
Primero, declaramos una función llamada adjustFontSize(). Es el corazón de nuestra operación, el motor que va a mover nuestro menú dinámico.
<!-- fs-richtext-ignore -->function adjustFontSize() {
// ...
}
Dentro de esta función, seleccionamos todos los elementos con nombres de clase concretos. Piensa que es como decirles: "¡Eh, te necesitamos un momento!"
<!-- fs-richtext-ignore -->var menuItems = document.querySelectorAll('.menu_item');
También obtenemos el ancho y el alto del viewport. Es como preguntar: "¿De cuánto espacio disponemos para jugar aquí?"
<!-- fs-richtext-ignore -->var viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
var viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0) - 60;
A continuación, calculamos el tamaño de fuente a partir del ancho y el alto del viewport. Los multiplicadores son como nuestros ingredientes secretos para que el tamaño de fuente quede perfecto. Nos quedamos con el menor de los dos tamaños calculados. Es nuestra forma de decir: "No nos pasemos con el tamaño de fuente, ¿vale?" Esta es la parte en la que tienes que experimentar con ambos valores hasta dar con el punto justo, ya que varía según la fuente y la longitud del texto. Los números del fragmento de abajo son valores ilustrativos de una versión anterior de nuestro script; el ejemplo sencillo de arriba usa 0.065 y 0.21, y el CodePen avanzado usa 0.095 y 0.25, porque cada fuente necesita su propio ajuste.
<!-- fs-richtext-ignore -->var fontSizeBasedOnWidth = viewportWidth * 0.089;
var fontSizeBasedOnHeight = viewportHeight * 0.19;
var fontSize = Math.min(fontSizeBasedOnWidth, fontSizeBasedOnHeight);
En el script avanzado, los apellidos usan una fuente distinta a la de los nombres, así que les damos su propio tamaño, calculado a partir del tamaño del nombre con un multiplicador aparte (el valor del fragmento es ilustrativo, y el CodePen avanzado usa 0.91, ajustado para su fuente con serifas). Aquí también calculamos el espaciado entre letras, que es del menos 3 % del tamaño de fuente.
<!-- fs-richtext-ignore -->var fontSizeLastName = fontSize * 1.08;
var letterSpace = fontSize * -0.03;
Por último, aplicamos los estilos a nuestros elementos. El fragmento de abajo es el bucle sencillo que establece el tamaño de fuente. En el CodePen avanzado, este mismo paso también establece el espaciado entre letras en los nombres, el tamaño más pequeño de los apellidos y la altura de cada bloque de enlace, calculada a partir de los dos tamaños de fuente y sus interlineados.
<!-- fs-richtext-ignore -->menuItems.forEach(function(item) {
item.style.fontSize = fontSize + 'px';
});
¡Y voilà! Ya tenemos un menú dinámico que ajusta su tamaño de fuente al tamaño de la pantalla. Ajustas los multiplicadores una sola vez para tu elemento de menú más largo, y a partir de ahí el menú llena el espacio con cualquier ancho o alto.
El bis
Pero no nos detenemos ahí. Llamamos a nuestra función cada vez que se cambia el tamaño de la ventana. Es como decir: "¡Eh, si el espacio cambia, volvamos a hacerlo todo de nuevo!"
<!-- fs-richtext-ignore -->window.onresize = adjustFontSize;
También llamamos a nuestra función cuando el documento está listo. Es nuestra manera de decir: "¡Que empiece la fiesta!"
<!-- fs-richtext-ignore -->document.addEventListener('DOMContentLoaded', adjustFontSize);
Una alternativa solo con CSS para casos sencillos
Si todos tus elementos comparten una sola fuente, puede que no necesites JavaScript en absoluto. La función CSS min() devuelve el menor de los valores que le des, que es justo lo que hace nuestra llamada a Math.min(). Algo como font-size: min(6.5vw, calc((100vh - 60px) * 0.21)); te da el mismo comportamiento de “el menor entre ancho y alto” en cada cambio de tamaño, usando los multiplicadores de nuestro ejemplo sencillo. Aun así, tendrás que ajustar los números para tu propia fuente. Recurrimos a JavaScript cuando necesitamos dar tamaños distintos a dos fuentes, ajustar el espaciado entre letras o basar el cálculo en el propio texto. La función min() está disponible en todos los navegadores desde julio de 2020 (fuente: MDN Web Docs).
Si además vas a colocar un vídeo al pasar el cursor detrás de un menú como este, ya hemos explicado cómo crear vídeos de fondo con CMS en Webflow usando el Custom Element. Y si los estilos en línea que aplica un script como el nuestro no parecen respetar tus clases, nuestra guía sobre la especificidad CSS en Webflow te explica por qué.
Preguntas frecuentes
¿Cómo hago que un tamaño de fuente se ajuste tanto al ancho como al alto del viewport?
Calcula un tamaño de fuente a partir del ancho del viewport y otro a partir del alto, y usa el menor de los dos. En JavaScript es Math.min(); en CSS es min() con las unidades vw y vh. Usar el valor menor significa que el texto nunca se desborda en ninguna dirección.
¿Puedo hacer tamaños de fuente dinámicos en CSS sin JavaScript?
Sí, en casos sencillos. Una regla como font-size: min(6.5vw, calc((100vh - 60px) * 0.21)); reproduce nuestro ejemplo sencillo sin ningún script. JavaScript sigue siendo útil cuando necesitas dar tamaños distintos a dos fuentes, un espaciado entre letras personalizado o un cálculo basado en el propio texto.
¿Por qué no usar simplemente el ancho del viewport (vw) para el tamaño de fuente?
Un tamaño de fuente basado solo en el ancho sigue creciendo en ventanas bajas y anchas, así que el texto puede desbordarse del viewport y obligar a hacer scroll. Comparar el tamaño basado en el ancho con uno basado en el alto y quedarse con el menor evita ese problema.
¿Dónde pongo el script en Webflow?
Añádelo como código personalizado antes de la etiqueta de cierre del body, ya sea en los ajustes de la página o en un embed, y asegúrate de que la clase a la que apuntas (aquí .menu_item) coincide con la clase de tus elementos. El script se ejecuta una vez cuando el documento está listo y de nuevo en cada cambio de tamaño.
Para terminar
Y ahí lo tienes, amigos. Una guía paso a paso para que tu texto en Webflow sea tan dinámico como un acróbata del Cirque du Soleil. Requiere un poco de trabajo, pero al final tenemos un menú que se ve genial y se adapta a tu contenido y a las pantallas de tus usuarios.
Recuerda, la clave de una gran experiencia de usuario es la adaptabilidad. Y con este menú dinámico, vas por muy buen camino para crear un sitio tan adaptable como el que más.
Hasta la próxima: sigue explorando, sigue experimentando y, sobre todo, sigue creando. El mundo de Webflow es tu campo de juego. ¡Ahora ve a hacer algo increíble!
Si te ha gustado este post, échale un vistazo a nuestros otros tutoriales.
