Fit Text – What a difference a Dave makes
Introduction
Whilst looking into a project in which I wanted ‘large scalable responsive text’ I tried out various JavaScript packages. In the past I would have used Dave Rupert’s FitText but that utilises jQuery which I moved away from quite some time ago.
There have been other non jQuery versions along the way but they all require ‘coaxing’ to get what you need in terms of ‘full width.’
I finally found the Fitty Library from Rik Schennink. Perfect for what I required… To a point.
Using Fitty JS
For full width with no adjustments the library is ‘almost’ perfect. It can on occasion require a page reload which isn’t ideal. Then there’s a big issue with the height of the container parent.
The only way I could think of was to add some extra code in the section that adds the inline code making the height of the container the same size as the font…
v = function (e) {
(e.element.style.whiteSpace = e.whiteSpace),
(e.element.style.display = e.display),
(e.element.style.fontSize = e.currentFontSize + "px");
},I added…
(e.element.style.height = e.currentFontSize + "px");So we end up with…
v = function (e) {
(e.element.style.whiteSpace = e.whiteSpace),
(e.element.style.display = e.display),
(e.element.style.fontSize = e.currentFontSize + "px"),
(e.element.style.height = e.currentFontSize + "px");
},This was in an effort to allow for variable widths and font sizes…
All in all, after editing the script itself, then having to add lots of whitespaces ( ) to create the ‘padding’ needed to emulate the different ‘widths’ I decided that I was “on a hiding to nothing.”
Using SVG Text
The alternative is to use good old SVG, my only reticence is making them all accessible. If anyone has any comments about how best to handle something like the example below, please get in touch, I’m all ears.
Download sample code
I’ve assembled all the parts so that you can play with them. The standard – software is provided “as is”, without warranty of any kind – applies here.
That’s all folks
This is more of a template for me to play with but you’re welcome to have a play too. If you have any comments about making SVG‘s more accessible I’m always open to hearing about them.
// End of Project
More Information
Further Reading
- Cooper Std Black Font (fontsgeek.com)
- Fitty Library on GitHub (github.com)
About Dave Barr
