Expression- getting each text height when there are 3 line text in the text box

[Aurora Wang]

I am looking for an expression that can get each line text’s height when there are several lines in the text box. It would be very useful if I create a responsive mask box for each line.

[Julian Chojnacki]

Hi, you could either take fontSize*.75 + leading, or the sourceRect height of your text layer divided by the number of lines. So:

const { fontSize, leading } = thisComp.layer("Text").text.sourceText.style;
const lineHeight = fontSize*.75 + leading;

Or

const numLines = thisComp.layer("Text").text.sourceText.split('\r').length;
const lineHeight = thisComp.layer("Text").sourceRectAtTime().height/numLines;

[Aurora Wang]

Hey Julian, Thank you for your expression!

– The first one doesn’t work if I change the text from 3 lines to 2 lines. (Attached the images) Please lmk if I am wrong.

– The second one works great! If you have time, would you please explain the “const numLines thisComp.layer(“Text”).text.sourceText.split(‘\r’).length;” a little bit?

I only know that using “split(‘\r’)” can return the text to the next line. And “length” in text expression is the length of all characters. I have no idea when you combine them, you will get the number of lines. Wow!

[Julian Chojnacki]

Hi Aurora, you’re right – the first code needs tweaking. Check out this great reference that dives a bit deeper into getting actual text heights:

https://motiondeveloper.com/blog/dealing-with-descenders

Regarding split(‘\r’).length, split first breaks up the text into an array using the carriage return as a separator, then length returns the length of that array.