Copy link to clipboard
Copied
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.
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.
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 ?
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
...Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Thank you so much. But company requirements dictate I have to use specific fonts. Any workaround for the situation then ?
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
Sure. 🤣 I have kept that as Plan B. But I was just hoping if there was an easier route.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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 ?
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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:
srcTxt = thisComp.layer("Master Text");
chrNo = index - srcTxt.index;
srcTxt.text.sourceText.slice(chrNo - 1,chrNo)​
ldr = thisComp.layer(index - 1);
hGap = thisComp.layer("Master Text").effect("Gap")("Slider");
x = ldr.position[0] + hGap;
y = ldr.position[1];
[x, y]​
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.
Copy link to clipboard
Copied
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.