Letter Spacing Fit to Box

1

Hello,

Does anyone know it there is a way to set the letter spacing to fit to the box the variable is in? I am trying to space the letters of a variable to line up with a header. I realize it won’t be perfect I was just hoping for a better result than setting it to one size and going with it.

2

Hi Bfanaich,

Are you looking to “space out” text between characters or scale the text to fit the box (copy fit)?

Erik

3

I am looking to space out the text to fit in the box. I have a variable that contains 0, 1 and/or D’s. There are twelve per variable and I am trying to line each letter with a header letter, but with character width of a D is a lot wider than 0 or 1. If i set the spacing static either the D’s don’t fit in the box or the 0 and 1 are way to small.

4

So something like this?

image
image1444×369 20.9 KB

5

Yes, I am working in a smaller box, but I don’t think that would really affect anything and the variable has spaces between each letter.

0 1 D 0 1 D 0 1 D 0 1 D instead of 01D01D01D01D

If that would affect anything.

6

I managed to do this by creating a custom Handlebars helper which wraps each character in a element and subsequently use a CSS trick to distribute the elements.

In the section the expression looks like this:

{{{wrapChars somecare}}}

This sits inside a paragraph and applied some inline styles (could also be handled through a stylesheet), the source looks like this.

<p style="display:flex;justify-content: space-between;">{{{wrapChars somevar}}}</p>

In a control script I created the wrapChars helper.

Handlebars.registerHelper('wrapChars', function (value) {
  if (value == null) return '';

  const html = String(value)
    .split('')
    .map(char => `<span>${char}</span>`)
    .join('');

  return new Handlebars.SafeString(html);
});

Validate if this works in your version (I’m prob slightly ahead using 2026.1).

Erik

image
image1472×806 85.6 KB

1 Like
7

I am still on 2025. When I get a chance I will give this a try, and let you know the outcome. Thank you for your help.

8

Try this:
space-characters.OL-template (7.5 KB)

1 Like
9

In case anyone is curious how this would work in the upcoming Chromium-based edition of 2026.1:

Justifying text by adding space between characters is a standard CSS feature. In theory all you would need is text-align: justify in combination with text-justify: inter-character, and if this would also need to apply to the last line you would include text-align-last: justify. No scripting needed.

Unfortunately we did not have enough time to include this in 2026.1. It will work out of the box in 2026.2 though.

2 Likes
10

That work perfectly.

Thank you, Erik

1 Like