• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Help with Kerning and Counter in expressions.

Explorer ,
Jun 14, 2023 Jun 14, 2023

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. 

 

 

TOPICS
Error or problem , Expressions , How to , Scripting

Views

604

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 3 Correct answers

Community Expert , Jun 14, 2023 Jun 14, 2023

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.

Votes

Translate

Translate
Explorer , Jun 14, 2023 Jun 14, 2023

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 ? 

Votes

Translate

Translate
Community Expert , Jun 15, 2023 Jun 15, 2023

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

...

Votes

Translate

Translate
Community Expert ,
Jun 14, 2023 Jun 14, 2023

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 14, 2023 Jun 14, 2023

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 ? 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 14, 2023 Jun 14, 2023

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 14, 2023 Jun 14, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 14, 2023 Jun 14, 2023

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 14, 2023 Jun 14, 2023

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 ? 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 15, 2023 Jun 15, 2023

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 15, 2023 Jun 15, 2023

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 15, 2023 Jun 15, 2023

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:

 

  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. 

RickGerard_0-1686815597648.gif

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jun 21, 2023 Jun 21, 2023

Copy link to clipboard

Copied

LATEST

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines