ADOBE AFTER EFFECTS: Forum Expressions Tutorials Creative Cloud

Vertical alignment of multiline text boxes

COW Forums : Adobe After Effects Expressions

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Alessandro Ugazio
Vertical alignment of multiline text boxes
on Feb 27, 2019 at 3:51:20 pm

Hi everybody, first post here ☺

I'm in the need to vertically distribute (to fill a "fixed" height) some text layers that can be of one or two lines (all left aligned, no animations).

I already applied sourceRectAtTime in order to generate rectangular shapes that follow the dimensions of textboxes, but I don't know how to align them evenly (Align panel works only with anchor points, I need equal distances instead).

I just need some "elegant" way to have the textboxes calculate for themselves the space between them and divide it in order to automatically distribute them in vertical space.

The icing on the cake would be the possibility to stretch or shorten the height of the whole cage (in blue) with a slider or similar.

An animated GIF should make everything clear: same colors = same spaces
13157_verticalalignment.gif.zip

Thank you very much in advance!

Alessandro Ugazio


PS: I'd like to thank a lot Dan Ebberts and all the smart people here in this forums. I've often found solutions here, unfortunately this time I couldn't find what I was searching for, so at last I asked :)


Return to posts index

Dan Ebberts
Re: Vertical alignment of multiline text boxes
on Feb 27, 2019 at 7:18:56 pm

I think any solution is going to require that the expression for each of the participating layer knows which other layers are participating and where it is in the stacking order. That's going to depend on how you have things set up. So it will be easier to suggest a solution if you can provide that info.


Dan



Return to posts index

Alex Printz
Re: Vertical alignment of multiline text boxes
on Feb 27, 2019 at 7:36:54 pm

Seconding Dan's comment, you're going to need to figure out how to check all the necessary layers, their heights, and then their positions. Unfortunately expressions run one at a time, so they are going to have to do all the positions at once each time... or

Something I've done before is make a guide text layer and then inside the sourceText build one large expression to check all necessary layers and then output all of the necessary elements of data all at once as a JSON file. Then all you need to do is build smaller JSON parse expressions inside the layer positions that look at the text, compare a string to their name, and then grab that output of data.

Something to consider; more work upfront, but faster on the backside.

Alex Printz
Mograph Designer


Return to posts index


Alessandro Ugazio
Re: Vertical alignment of multiline text boxes
on Feb 28, 2019 at 5:53:33 pm

Thanks Dan and Alex for your quick replies.

The text layers are always 3 or 4, in two possible layouts.
Short titles fit in one line, longer titles wrap to a new line.
Then I have to manually justify the central lines to have them evenly spaced.
(The Align panel doesn't work with mixed textboxes of one and two lines, hence the need to manually uniform the space between them)
13161_abc.gif.zip

I'm searching for a solution to automatically sum and distribute the space between the lines, instead of doing it manually.

A "Justify" button to click after titles composition will be perfect!


Thank you for your patience...
Alessandro


Return to posts index

Alessandro Ugazio
Re: Vertical alignment of multiline text boxes
on Mar 5, 2019 at 4:10:51 pm

Ok, I created an AEP with the two possible layouts (three or four text layers) and the simulation of what I'm trying to obtain (automatic instead of manual distribution of spaces between text layers)

13175_verticalalignment.aep.zip

Thank you very much
Alessandro


Return to posts index

Kalleheikki Kannisto
Re: Vertical alignment of multiline text boxes
on Mar 5, 2019 at 7:53:14 pm

Here's a working implementation (CC2018).

The total height can be adjusted by modifying the shape height on the "Cage" layer. You do need to move the first line of text up or down to realign it.

There's a checkbox on the "separator" layer to switch between 3 or four lines of text. You can just hide the fourth line and shape box for the threeliners.

The shapes are being used for the calculation currently. You should be able to switch them for the text layers by copying the position expressions. Or keep them but hide them.

13178_verticalalignmentdone.aep.zip

Kalleheikki Kannisto
Senior Graphic Designer


Return to posts index


Alessandro Ugazio
Re: Vertical alignment of multiline text boxes
on Mar 6, 2019 at 12:46:58 pm

(Sorry for this late reply, but firstly I had to find a CC2018 to save the project as CC2015...)

Kalleheikki Kannisto, many many thanks for your elegant solution: I can't even imagine how difficult it was to solve, but I consider it a priceless gift...

As I said before, I usually try to find answers without directly asking, but this time I couldn't find anything that could fit.
I hope your brilliant solution can help other people in the future.

Special thanks to you and to all the smart people in this community!


Greetings
Alessandro


Return to posts index

Kalleheikki Kannisto
Re: Vertical alignment of multiline text boxes
on Mar 6, 2019 at 5:59:00 pm

You're welcome. The methodology is not all that complex, but there were some challenges to the implementation for sure.

The main trick is the "Separator" layer, which derives its height from the "cage" height minus the total of all the text box heights, which is then divided by the number of gaps between the texts (i.e. number of text layers minus one). If you followed that, you see that the resultant shape height is the distance that needs to be inserted between the lines.

The rest of the code is just adding up those text heights and multiples of the separator height from top down for each three of the moving text layers (the top text layer stays in place).

Plus that one checkbox to choose whether to include 3 or 4 text layers in the separator height calculation.

Kalleheikki Kannisto
Senior Graphic Designer


Return to posts index

Alessandro Ugazio
Re: Vertical alignment of multiline text boxes
on Mar 13, 2019 at 5:20:21 pm

Dear Kalleheikki Kannisto, I'm very happy with your code: it works smartly and it really saves me a lot of time...

There's just a small issue with the height of the textboxes, slightly varying in presence (or absence) of lowercase descenders.
(the line height should always be the same, descenders or not)

It's not a major problem, probably most people won't even notice the slight difference of space between the lines, but typographically this is an error and I'd like to correct it.

I tried to resolve it following this thread, but unsuccessfully (definitely not my field, sorry)

Here's a project with keyframed lines of text:
13201_verticalalignmentdescenders.aep.zip


Thank you again

Greetings
Alessandro


Return to posts index


Kalleheikki Kannisto
Re: Vertical alignment of multiline text boxes
on Mar 16, 2019 at 2:56:46 pm

This should do it.

What I did is added a slider that sets a fixed line height (of 80, to match the text line spacing). Then added a couple of rounding operations which forced the calculations of the lines to go to the nearest multiple of the line height.

Also, I put both the text size and line height at 80. Don't know if it works without both of them being the same. Which means that if you need to change the text size, keep all three values matching.

13208_verticalalignfixedlineheight.aep.zip

Kalleheikki Kannisto
Senior Graphic Designer


Return to posts index

Alessandro Ugazio
Re: Vertical alignment of multiline text boxes
on Mar 16, 2019 at 3:12:44 pm

Thank you very much!

I won't be able to open the project until monday, in the meantime I'm deeply grateful for your kindness ☺

Alessandro


Return to posts index

Alessandro Ugazio
Re: Vertical alignment of multiline text boxes
on Mar 18, 2019 at 11:26:49 pm

Fantastic, unbelievable: it just works like a charm, I think I could play with it for hours...

I really hope your code could help other people: I often felt the lack of typographically correct justifying systems, or a dedicated plugin or script.


Thank you so much
Alessandro

PS: Please tell me if and how I can express my gratitude (making a donation or similar)


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2019 CreativeCOW.net All Rights Reserved
[TOP]