Help with Kerning and Counter in expressions.

[John220708945ytq]

Hello.

I'm trying to make a time counter using expressions. I have created a text later and I have an expression on source text for the hours, minutes and seconds. I have connected them to a slider as well so that I can animate them. But apparently they are having some Kerning issues. How to fix that so that it adjusts, because I have a box shape layer behind the text later. 

[Rick Gerard]

I have not looked at your AEP yet, but kerning problems are solved by choosing a Monospaced font. Courier is one example. If you use anything but a Monospaced font, the width of each character can be different. If I get some time later, I'll look at the project.

[John220708945ytq]

Thank you so much. But company requirements dictate I have to use specific fonts. Any workaround for the situation then ? 

[Mylenium]

Sure. Put in the work and use separate layers/ pre-comps and animate them individually liek we used to do in the old days. Sometimes things can only be done the hard way.

Mylenium

[John220708945ytq]

Sure. 🤣 I have kept that as Plan B. But I was just hoping if there was an easier route. 

[Dan Ebberts · Accepted solution]

I downloaded your 7-segment font from dafont and it comes with a mono-spaced version (Digital-7 Mono), which I think will solve your problem.

[John220708945ytq · Accepted solution]

Give me a few minutes. I'll check it right now and reply. 

Edit :- Omg it worked. Thank you so much. How does this work ? Can you give me some explanation on this ? I never knew this thing. What is this ? And how does after effects calculate this in the backend ? 

[Dan Ebberts]

Honestly, I have no idea how a mono-spaced font works under the hood. I just know that if you can pick one for  your counting animation, it will save a lot of headaches.

[Rick Gerard · Accepted solution]

When the designer creates a Monospaced font, all of the little boxes the fonts are drawn in are the same size. In a regular font, the box size depends on the letter and everyone can be different. You can create an M that is the same width as I or stretch a Q out to be twice as wide as an O. 

I helped design a font for a client once a long time ago. I'll let other folks do that from now on. It made me crazy. I would rather troubleshoot an expression with no visible errors and 100 lines of code than design another font.

[Rick Gerard]

If I were trying to build a timer and were stuck with a font that was not suitable, I would set up an expression to offset a single character layer (center justified to make it easy), then offset the next layer using index-1 by a specific distance. Each character would then be added to the timeline. Then I would hide a text layer (turn it off), apply my timer to the hidden text layer, and retrieve the appropriate character from the master timer layer using an expression for a text that looked at the appropriate character number. A couple of sliders to control the horizontal space between layers, and I'd be done. If you used the layer index, you would only have to write two relatively simple expressions, then position the first number in the layer. Something like this would work for spacing the layers:

1. Create your Master Text layer and add an offset value slider.
2. Create a new empty text layer below the Master Text Layer and give it a name like "Char"
3. Add this expression to the "Char" layers. Source Text Property:
   

   srcTxt = thisComp.layer("Master Text");
   chrNo = index - srcTxt.index;
   srcTxt.text.sourceText.slice(chrNo - 1,chrNo)​

4. Duplicate the layer and add this expression to the "Char" layer's Position Property (it should now be on the bottom of the layer stack:
   

   ldr = thisComp.layer(index - 1);
   hGap = thisComp.layer("Master Text").effect("Gap")("Slider");
   x = ldr.position[0] + hGap;
   y = ldr.position[1];
   [x, y]​

5. Duplicate the "Char" layer until you have enough copies of the layer with both expressions under the "Master Text" layer to use up all the spaces.

You have now created a pseudo monospaced font from any font. 

You can turn off the Master Text layer or make it a guide layer so it will not render, and you've got a nice stack of characters that can be positioned and adjusted anywhere you want by just moving the first layer (Layer 2 in the screenshot).  Apply your own counter, and you've tot it. 

EDIT: While Dan was solving your problem, I was writing my post with the expressions. I have used this kind of stacking layer trick before to fix font problems. 

[John220708945ytq]

Omg. Thank you for this as well. I'm gonna add this to my asset as well. I think I need to remember these because I use these sort of infographics a lot in my company work. So I frequently need them.