FileMaker Copyfitting with JavaScript

In this post I will demonstrate a FileMaker Copyfitting technique using HTML5 canvas and JavaScript. Watch the tutorial and download the demo.

 

What is Copyfitting?

Copyfitting is automatically adjusting the font size of a piece of text where the lengths of the text may vary.

 

The Problem – One Size Doesn’t Fit All

In my years in the print industry as a graphic designer and pre-press professional, I dealt with this issue a lot. In the case of generating something like business cards or shipping labels, you may have names and addresses of various length. Some may be short and some may be very long. When designing these items it is best to design for your worst case scenario, in other words, your longest data. However, this basic rule doesn’t always yield the best result. Your longest data may look great but when you get to a shorter instance, it may need to be adjusted manually. This can be very time consuming and costly.

 

The Solution – FileMaker Copyfitting to the Rescue

Using HTML5 we have access to the canvas element. Accessing the canvas element with JavaScript we have the ability to measure the text extent and then compare that measurement to the size of the text area in FileMaker. Making this function recursive allows it to perform in a loop until it reaches a font size that fits the text area. By supplying the function with minimum and maximum font preferences, this function can be used to enlarge smaller fonts or to reduce larger fonts.

 

In the video below I will demonstrate how I implemented this great technique in FileMaker. A free sample file is included at the end of this post to help you get started.

[vc_separator]

Thanks for stoping by to read this post. Feel free to comment on what you think of this technique.

As always, keep pushing the limits of what FileMaker can do!

Best regards,
Aaron Giard

Fill out the form to receive your free demo file.