Scaling Text Made Easy: Framer’s Fit Text Feature.
We launched a new feature called "Fit Text," which allows you to create bold headings that scale to fit any container. This feature supports multiple lines, inline formatting, and min and max widths, all while maintaining high performance. In this post I explain how we pulled this off.
The Challenge: No Native CSS Solution
The Solution: SVG with viewBox and foreignObject
I discovered that an SVG with a viewBox and support for HTML in SVG via a foreignObject element, could provide a scaling effect. This trick requires knowing the exact bounding box of the text and committing it to the viewBox, then rendering the text inside the SVG in a foreignObject. The foreignObject means that screen readers and SEO have no problem finding the text inside. The caveat is that the viewBox of the SVG needs to be updated whenever the size of the text changes, and it needs to kept in sync; otherwise, the text will become cut off or uncentered. This probably rules out this solution for most custom sites. It's simply not feasible to determine this viewBox any time any text is edited, or its properties that effect its size change.
The Automation: Framer to the Rescue
Luckily for us, Framer can automate this process, removing the hassle of having to manually update a viewBox anytime the text changes. Whenever you set text to "Fit", Framer measures the text at its current font-size, gets the bounding box, saves it, and renders an SVG around your text with a viewBox. Every time you edit the text, Framer repeats that process to ensure the viewBox stays relative to the text. Framer can even support a seamless editing experience by converting the text size back to pixels whenever you open it in the text editor by doing some basic math based on its current width. When you finish editing, Framer puts the viewBox back, and it's effortlessly scaling again without any performance impact on the canvas.
The Result: Butter Smooth Resizing
The Future: Container Queries
In the future, we plan to switch to container queries once they are fully supported by the browsers that Framer supports. You can use the cqw unit the same way you can use a vw unit, but CQW is relative to the container. This would work for components, since it removes the need for a complex css calc statement.
Fit Text is an excellent example of how Framer can abstract engineering work that would be hard to implement on a case-by-case basis and instead lets you focus on shipping fantastic sites. It's exciting to see what people will build with this new feature.
Subscribe to the Hype
Subscribe to our newsletter to get the latest hype around Framer every week.