Rebuilding a label letter-by-letter using gui.get_text_metrics_from_node

Questions
#1

Hi,

I’m trying to make a sort of text pop but I want to animate each individual character separately so I’m putting each in their own label but the metrics that I get back are not consistent so I can’t replicate the look it would have if the entire word was is in a single label.

When I enter the word in the label and get its width I get 175 back, but when I do the same for the individual characters and add their widths together I get 221. There is little additional information returned by the metrics so I don’t know how to use that info to correctly space the characters next to each other to replicate the original look.

Attached is a screenshot of how it looks if I use the previous character’s width as an offset for the next one (in orange) and how it compares to the original string (in black)

44 57

#2

It really reminds me RichText by @britzl. There are animated words and letters even, so maybe it’s good to compare solutions and see how metrics are parsed there :wink:

3 Likes
#3

So I ended calculating the kerning of each character to determine the spacing between the letters. You can do so by doing the following for each letter:

  1. Use a label with the previous substring and another label with the next character to be added and get both of their metrics (previous_width, char_width).
  2. Use a label with the new substring and get its metric (target_width)
  3. The kerning will be something along the lines of (previous_width + char_width) - target_width
  4. The next character position can then be set to start_pos + previous_width - kerning

Note: Spaces will be a special case because they don’t seem to be counted in the metrics if they are ate the end of the substrings.

24

24

6 Likes