Dynamic Name Sizes on Check-in Labels

  • By Jim Michael 2 Years Ago

If you’ve played with creating or modifying check-in labels at all, you know that the size of the font used for the person’s first (and last) name is limited by the longest person’s name you have checking-in. After all, you don’t want a long name to wrap or be truncated if at all possible, right? At our church we also use our system for much more than child check-in… just about every class or event involves people using the kiosks to check in and grab a name tag, so there’s a large range of “name sizes" to accommodate.

The thing is, we really like BIG first names around here. They are easy to see in classroom settings, etc. and we just like them to be as big as reasonably possible. But a problem naturally arises when you have someone attending with a really long first name which determines how large the font can be on the labels to fit said name. In our case we have a “Sarah-Elizabeth"… yep, 15 characters! This means that using the built in ZEBRA0 font on our 4x2.5in labels we could only use a max 40pt font size to squeeze in a 15 character first name. Yet we also wanted to leave room for a potentially longer name, so initially chose a 20 character limit for the Nick Name field -- which ends up being a max 32pt font -- and looks a bit smaller than we wanted for the majority of people.

If you think about it, most (US) first names are nowhere near 15 characters long (if you can believe Google, the average first name length in the US for the past 100 years is ~6 characters), so why let a few really long names dictate the font size on your label? I thought about this for a bit and realized that with Rock’s use of Lava to drive label fields, we could easily create labels that change the font size depending on the length of the name. This would allow the majority of people to get their average-length names printed in a large size while those with longer names would have theirs printed without wrapping or truncation by using a smaller size. Here’s how we did it.

First off, if you’re not already familiar with modifying or creating Zebra labels for Rock, you should stop and go read the docs on this here as I won’t be covering that information and you will likely be lost. ZebraDesigner is a finicky program that takes a bit of time, fiddling, and luck to get the results you want. So assuming you already know the lay of the land regarding Zebra labels, read on!

Next, realize that there is no functionality in ZebraDesigner to change the size of a text box’s font dynamically. This means we have to get clever… Here’s an example of our Child label as seen in ZebraDesigner (it looks crazy, I know, but stick with me!) I’ve artificially highlighted the various fields so you can see what’s happening.

Child Label

The Red-outlined text box is the default Nick Name field. On our labels this is set to a 54pt size using ZEBRA0 font for a maximum of 10 characters. The Green-outlined box is a new NickNameLong mergefield I added to the Rock label (more on that below) set to a 32pt size for a maximum of 20 characters. Notice how the boxes are right on top of each other? Hmm. The Blue-outlined box is the Last Name field set to a 28pt size for a maximum of 22 characters.

Hopefully you’re starting to see what’s going on here. The label has two fields for the first name (NickName and NickNameLong) taking up the same general position on the label, and we will use the power of Lava to determine which one gets printed. Eureka!

Next let’s look at the Rock side of things to see what makes this label tick. First go to Administration | Check-in | Label Merge Fields in your Rock instance. There will already be a Nick Name value with a MergeField of {{ Person.NickName }}. Edit the Nick Name value and change the MergeField to:


{% assign nameLength = Person.NickName | Size %}
{% if nameLength < 11 %}
{{Person.NickName}}
{% endif %}

See what we’re doing here? We’re simply checking the length of the person’s NickName and if it’s less than 11 characters (meaning 0-10), insert Person.Nickname, otherwise merge nothing.

Now add a new NickNameLong Label Merge Field and give it the following Lava:

{% assign nameLength = Person.NickName | Size %}
{% if nameLength > 10 %}
{{Person.NickName}}
{% endif %}

Just like before, we’re simply checking the length of the person’s NickName and this time inserting Person.NickName only if it is greater than 10 (meaning 11-20 characters in our case), otherwise merging nothing. Get it?

This has the effect of letting only one of the NickName text boxes print on the label, depending on its length, and thus using the appropriate font size. Exactly what we want! Be careful about changing the Lava to make it more readable (indent, etc) as any whitespace you add could end up on the label and will throw off things like centering, especially at these large font sizes.

There’s one more thing to configure to make this all work. Go to Administration | Check-in | Check-in Labels and open the label you’re dealing with (the assumption here is that you've already uploaded your modified Zebra label with the new NickNameLong field into Rock... again, if you don't know how to do that, read the docs.) If you've uploaded your modified label correctly, you should see your new NickNameLong merge code in the list. Match that with the NickNameLong Label Merge Field you created above and save it (note that because you re-uploaded the modified label to Rock, you will also have to re-match ALL merge codes on the label to their correct values.
[

That’s it! You now have a label that will dynamically change the font size based on the length of the person's nick name. Here are two examples of this on our child label:

A few final thoughts:

  • You will likely need to clear the cache (Admin toolbar, i icon) for these changes to take effect.

  • The lengths of “10 or less" for large font and “11 and greater" for smaller font work for us, but are somewhat arbitrary so use whatever works for you. Since Rock is now used in many places outside of the US, this idea might be even more important with very long names in some regions.

  • You may or may not be using labels the same size as ours (4x2.5") so don't get hung up on the specific font sizes we use since they might not make sense for you... do whatever makes sense for your labels. This post is more about inspiration vs. an exact formula.

  • NickNameLong is arbitrary and just what I decided to call our long-version Nick Name. Use whatever makes sense to you.

  • If you want to get really fancy, you could extend this idea to create more than two levels of name lengths for more variability… go crazy if you want to, but remember that just because you can do something doesn’t mean you should!

BONUS TWEAK: The eagle-eyed among you may have noticed that tiny little timestamp above the YZP code in the labels above. We find value in printing a timestamp on our labels just so we always know exactly when a label was printed... it helps with "found" labels, troubleshooting check-in/printing problems, prevents potential re-use of a claim tag, etc. If you're wanting to do the same, it's super-simple:

  • Add a timestamp Label Merge Field with this lava: {{ 'Now' | Date:'M/d/yy h:mm:ss tt' }}

  • Add the timestamp mergecode to your label in ZebraDesigner. Put it anywhere you want... you can even rotate the field to have it print sideways which works great along the edge of a label. We made our font size for the field as small as possible yet still readable.

  • Upload the modified label to Rock and associate all merge codes with their corresponding Label Merge Fields, including the new timestamp field. And don't forget to clear cache ;-)


@jimmichael
The Crossing
St. Louis, MO

IT Manager at The Crossing in St. Louis. Lover of all things Rock!