FileMaker Copyfitting with JavaScript

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.

Watch The Tutorial

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

Download the Free Demo File

Fill out the form to receive your free demo file.






Aaron Giard
8 Comments
  • Posted at 6:29 am, March 8, 2017

    Thank you so much for this… another great use case for JavaScript!

  • Posted at 2:25 am, March 11, 2017
  • alistair campbell
    Reply
    Posted at 1:11 am, March 13, 2017

    hi Aron
    i would like a copy of the database
    but the download link is not working for me.
    Could you please check download link
    Thanks
    Alistair

  • Posted at 8:50 am, March 17, 2017

    I’m truly enjoying the design and layout of your site. It’s a very easy on the eyes which makes it much more pleasant for me to come here and visit more often. Did you hire out a developer to create your theme? Exceptional work!

  • Posted at 4:09 am, March 21, 2017

    Aaron, very cool demo. Coming from the print world, I have longed for copyfitting in FileMaker.

    I was having a little issue with the demo file. I kept getting the message:
    “The file “Cirrus_Logic_Copyfitting_Demo.fmp12” could not be opened. Either the host is not available, or the file is not available on that host.”
    when trying to process the records.
    Turns out, it didn’t like having more than 1 version of FileMaker open. Once I quit the other one, the issue went away.

    But that message got me thinking… and it turns out that it also does not work if you change the file name. A simple fix is to replace the literal file name in the off-layout JavaScript text block with “{{FileName}}” – without the quotes.

    Thanks for sharing!
    -Shawn

Post a Comment

Comment
Name
Email
Website