How to Avoid Overflowing Text With AntiOverflowFontResizer.js
Designing a website is a thoughtful process, especially when it comes to font sizes on different screens.
Depending on the context, every text should have sizes to help with content hierarchization.
But then we have a problem. What happens if a text is dynamic, and the client wants to change it for whatever he likes? Every container needs to be like a goalkeeper: prepared for anything they may throw at it.
Words that are longer than expected can easily break a container. This happens more often if you work with multilanguage sites, and you don’t have this in mind! We’ve had some cases where an “Event details” call-to-action on a website it’s translated into German, and the result is: “Veranstaltungsdetails” (editor’s note: it’s true, it’s so long that it breaks this text line!)
Not being able to find a simple script that solved this, I got to work and made this flexible JS code. The main goal is to prevent long words from breaking free of its container, overflowing it, and damaging the overall experience of the site.
Download the code here: GitHub
How it works
$('your-element').FluidFontType();On page load, the script:
- Gets the current font size and sets it as the maximum;
- it measures the text container’s width;
- measures minimum text width;
- checks if overflow is true comparing both widths (if any word is wider than its container, it continues),
- It calculates the proper font size value to make the longest word fits in its container, doing a simple cross-multiplication:
fontSize = contWidth * maxFontSize / textWidth- Finally, it sets the newly calculated font size value.
Now, on window resize is where the real magic happens:
- The script checks if a text container has changed since page load, or if the window has been resized (if that’s true, it continues);
- It resets text’s font size (in case the text has already got an inline font size CSS property);
- It gets the current size and sets it as the new maximum (here you will get the assigned font size for that breakpoint on the CSS);
- Measures the minimum text’s content width;
- Checks if overflow is true comparing both widths;
- Calculates the proper font size;
- And finally, it reduces the text’s font size.
Pretty neat, huh? But wait, there’s more (queue in infomercial music)
Phrase mode:
You can also configure the script to keep tabs on entire phrases. When you set this option to TRUE, the script will adjust the font size so that the whole phrase fits in. This is an extra measure to avoid weird sentences.
Setting up phrase mode:
$('your-element').FluidFontType({ phraseMode: true});Note: If the text has white-space: nowrap; CSS property, then the script will adjust the font size to fit the whole sentence, and it’s not necessary to turn this feature ON.
In the end
Designing a website is a thoughtful process, but you don’t need to reinvent the wheel all the time. Using these solutions doesn’t make you the worst dev. I studied Visual Communications, yet I feel my experience leads me to say that: if there’s a solution to a problem, why not use it? You can even download this script and adjust it to what you need.
If you find any ways to iterate upon this code, please fork the project and leave your mark! The whole community will appreciate it.
Keep on coding.
This article was initially written by Gibran Sarraf, Lead front end developer, and edited by Flavio Ruiz, Content Manager. We both work at Moka, the coolest, fully-remote, design agency. If you’d like to know more about us, or why not, get a cup of coffee, contact us through our website or our LinkedIn profile.
