per-character styling

[Yoan Boisjoli]

Hey Adam! Basically what it does now is that you can feed the expression the length of the text (how many characters are in the text) so that the expression know how many characters should have the specific style (font in this case) that you want.

My favorite way of doing this is to have 2 text layers (i.e. day and time) that drives a main layer where everything is assembled. So the main layer looks for the length of each layers so that way, no matter how many characters you have in the day, it will be in the right font.

I will usually feed the Day and Time source text to the essential graphic’s panel. That way it’s easier for the editor to replace the day and time individually. You could also go one step further and have both be controlled by a drop down menu.

Here’s an exemple:

// Get text from the driving layers

// Get text from the driving layers
var dayText = thisComp.layer("Day").text.sourceText.value;
var timeText = thisComp.layer("Time").text.sourceText.value;
// Combine the text
var fullText = dayText + " " + timeText;
// Define styles
var baseStyle = text.sourceText.style.setFont("ArialMT"); // You need to specify a default style first so you can change it later
var dayStyle = baseStyle.setFont("B612Mono-Regular", 0, dayText.length); // Day font
var timeStyle = dayStyle.setFont("Boldstrom", dayText.length + 1, timeText.length); // Time font
// Apply combined styled text
timeStyle.setText(fullText);

[Adam Greenberg]

thanks so much, Im going to try it out

[Dan Ebberts]

If there’s always a space between the day and the time, you could use a single source layer, like this:

txt = thisComp.layer("Day Time").text.sourceText.value;
L1 = txt.split(" ")[0].length;
L2 = txt.substr(L1+1).length;
style.setFont("ArialMT",0,L1).setFont("Arial-Black",L1+1,L2).setText(txt)