FileMaker Copyfitting with JavaScript

m

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]

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

    Aaron has been a developer for 18 years with a focus on database-driven web applications. He spent 17 years in the print industry as a prepress manager and designer with a large focus on workflow design and automation. He was a speaker at the 2015 FileMaker Developer's Conference to a class of over 300 attendees. He also enjoys hiking with his family, playing guitar and drums, cooking high-end food, and photography.

    9 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
      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

      • Aaron Giard
        Posted at 1:16 pm, March 17, 2017

        Hi Alistair,

        I have sent you an email. I hope that helps. Thanks for viewing!

        -Aaron Giard

    • 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

      • Aaron Giard
        Posted at 7:57 pm, March 22, 2017

        Hi Shawn,

        Yes, your issue is common when using the FMPURL method if you have more than one version of FileMaker. I wish there were a way to target the version, but I digress. I also agree that making the filename modular would be the best way to go, although I did not do that for this demo.

        I am glad you are enjoying the file. I hope you find it useful. If you use it in production for anything, I’d love to hear about it.

        Thanks for viewing!
        -Aaron

    • Posted at 9:50 pm, June 26, 2019

      “You really saved my skin with this information. Thanks!”