Lanzamos una nueva función llamada “Fit Text”, que te permite crear encabezados en negrita que se escalan para ajustarse a cualquier contenedor. Esta función admite múltiples líneas, formato en línea y anchos mínimos y máximos, todo mientras mantiene un alto rendimiento. En esta publicación explico cómo logramos esto.

El Desafío: Sin Solución CSS Nativa

Comencé explorando bibliotecas existentes, pero todas tenían un defecto: necesitaban medir el texto que necesitaba estirarse antes de renderizar. Esto es un obstáculo para nosotros, ya que los sitios de Framer se generan estáticamente y necesitan renderizarse perfectamente en cualquier navegador antes de que se ejecute JavaScript. A continuación, intenté font-size: 100vw, que funciona de maravilla si el texto llena la pantalla. Sin embargo, se vuelve complicado si deseas que el texto llene un contenedor arbitrario. Para hacer esto, necesitas construir una expresión compleja de CSS calc que represente el tamaño de todos los ancestros expresados como porcentajes del total de vw. Aunque esto es posible (y algo que Framer ya hace para optimizar la calidad de las imágenes), sería difícil crear un componente que contenga texto con un tamaño de vw, ya que sería complicado conocer el tamaño de los ancestros dentro del código del componente aislado.

La Solución: SVG con viewBox y foreignObject

Descubrí que un SVG con un viewBox y soporte para HTML en SVG a través de un elemento foreignObject, podría proporcionar un efecto de escalamiento. Este truco requiere conocer la caja delimitadora exacta del texto y comprometerla al viewBox, luego renderizar el texto dentro del SVG en un foreignObject. El foreignObject significa que los lectores de pantalla y el SEO no tienen problemas para encontrar el texto dentro. La advertencia es que el viewBox del SVG necesita ser actualizado cada vez que el tamaño del texto cambia, y debe mantenerse sincronizado; de lo contrario, el texto se cortará o quedará descentrado. Esto probablemente descarta esta solución para la mayoría de los sitios personalizados. Simplemente no es factible determinar este viewBox cada vez que se edita algún texto, o sus propiedades que afectan su tamaño cambian.

La Automatización: Framer al Rescate

Por suerte para nosotros, Framer puede automatizar este proceso, eliminando el problema de tener que actualizar manualmente un viewBox cada vez que el texto cambia. Siempre que configures el texto a “Fit”, Framer mide el texto en su font-size actual, obtiene la caja delimitadora, la guarda y renderiza un SVG alrededor de tu texto con un viewBox. Cada vez que editas el texto, Framer repite ese proceso para asegurar que el viewBox se mantenga relativo al texto. Framer incluso puede soportar una experiencia de edición fluida al convertir el tamaño del texto nuevamente a píxeles cada vez que lo abres en el editor de texto haciendo algunos cálculos básicos en función de su ancho actual. Cuando terminas de editar, Framer vuelve a poner el viewBox, y se escala sin esfuerzo nuevamente sin ningún impacto en el rendimiento del lienzo.

El Resultado: Redimensionamiento Suave como Mantequilla

Cuando despliegas tu sitio, el viewBox ya está calculado, por lo que Framer puede generar el sitio de forma estática, y el texto se renderizará en el tamaño exacto correcto incluso antes de que JavaScript se cargue. Esto resulta en ninguna aparición repentina, redimensionamientos, o desvanecimientos, y un redimensionamiento suave como mantequilla.

El Futuro: Consultas de Contenedor

En el futuro, planeamos cambiar a consultas de contenedor una vez que sean completamente compatibles con los navegadores que Framer soporta. Puedes usar la unidad cqw de la misma manera que puedes usar una unidad vw, pero cqw es relativa al contenedor. Esto funcionaría para componentes, ya que elimina la necesidad de una declaración calc de CSS compleja.

Fit Text es un excelente ejemplo de cómo Framer puede abstraer el trabajo de ingeniería que sería difícil de implementar caso por caso y, en cambio, te permite concentrarte en lanzar sitios fantásticos. Es emocionante ver lo que la gente construirá con esta nueva función.