Text with auto resizing box issues

[theblankbeard]

I have an Auto sizing box I made but I am running into a little problem. I imagine their is a fix but my experience in expressions is limited, and my searching online has yet to yield any answers for me.

Right now I have a rectangle shape layer that is the child of a text layer. The box automatically resizes with the text using sourceRectAtTime() and I have an offset paths for the padding. These text boxes are sitting in the bottom right and bottom left corners of a text-safe zone I have for the final video and I want to keep them there when I edit the text.

I am easily able to keep the left and right edge there by simply changing the text to right or left justified depending on the side of the screen they are on, but if I add a line or add hanging letters (j, g, y etc.) then the bottom of the box drops out of text-safe.

I also am running into the issue of keeping a paragraph that is center justified, on the left/bottom corner of text-safe. I imagine it would be the same solution as the previous question on keeping it pinned to the bottom, but the current expressions I'm using (same as the code at the bottom of this post) doesn't work for keeping it pinned to the left/right side of text-safe.

Any links, tips, code or even hints would be greatly appreciated. I have the following expressions on the size and position of the rectangle paths.

Rectangle path: size

       var s = thisComp.layer("Movie Title");

var w = s.sourceRectAtTime().width;

var h = s.sourceRectAtTime().height;
[w,h]

Rectangle path: position

var s = thisComp.layer("Movie Title");

var w = s.sourceRectAtTime().width/2;

var h = s.sourceRectAtTime().height/2;

var l = s.sourceRectAtTime().left;

var t = s.sourceRectAtTime().top;

[w+l,h+t]

[Mylenium]

You need to add the widths and heights to the position rather than just absolutely setting it relative to the layer/ group.

Mylenium

[Kyle Hamrick · Accepted solution]

You just need to re-think the logic of this a little bit.

If the corner of the box needs to be locked to a corner of your safe area, that's what should be driving the positioning, not the text.

Box gets dimensions from text.
Text is parented to box.
Box anchor point is locked to bottom left/right corner of itself.
Box position is locked to the bottom left/right corner of safe area.

While it would certainly be possible to create one rig that does both left/right, I think it's much simpler to just make two setups, one for each side.

(I added a few static expressions just to keep the positions locked in place/avoid accidental dragging.)

Here's a rig that should work for the left, regardless of how much text you have in here. Let me know if you don't understand how to adapt it for the right side.

Text Box Rig

[theblankbeard]

Thanks so much Kyle! That worked wonderfully. I was able to switch it to the right no problem.

[pauliiiiiine]

Thank you so much for your response. I have the same problem. However I just started to work with expressions and I am struggling to adapt to the right side. Could you let me know how the script would look like?

[Rick Gerard]

If you want a shape layer to always conform to the text and stay lined up you must first, not mess with the anchor point of the text layer or the shape layer. You can use sourceRectAtTime() to grab the drive the size of the text box, but if you want to get the size of a text area you created you need to modify the method so that it reads sourceRectAtTime(time, true).width and sourceRectAtTime(time, true).height.

If you want to keep the shape layer lined up with the text rectangle you need to include sourceRectAtTime().left and sourceRectAtTime().top in the Rectangle position property. 

Instead of parenting the shape layer to the text layer, the best option is to tie the position of the shape layer to the position of the text layer with a simple expression.  At the most basic level, this is how I would set up the expressions for a resizing shape layer and keeping it always positioned properly behind the text.

// Rectangle 1> Rectangle 1 Path> Size
src=thisComp.layer(index -1).sourceRectAtTime();
xPad = 10; // could be a slider
yPad = 5; // could be a slider
x = src.width;
y = src.height;
[x, y] + [xPad, yPad]

//Rectangle 1> Rectangle 1 Path> Position
src=thisComp.layer(index - 1).sourceRectAtTime();
x = src.width/2;
y = src.height/2;
t = src.top;
l = src.left;
[x + l, y + t]

//Transform> Position
src=thisComp.layer(index - 1).position;

I would use (index -1) instead of the layer name because I always want my text background layer right below the text layer. 

To modify the expression so that it works on a text layer that has a text area defined you need to modify the source line to read src=thisComp.layer(Index - 1).sourceRectAtTime(time, true);

My animation presets include a checkbox to turn Extends on or off, sliders for horizontal and vertical padding, a time delay slider to adjust when the size of the text layer is sampled, and compensation for scale just in case the text layer is scaled. It also includes compensation for roundness and a slider to control roundness. 

Trying to use parenting and making different presets for paragraph justification is more work than is necessary. All I have to do if I want an auto-resizing background for a text layer is double click the animation preset and a new shape layer is created that automatically fits perfectly below any text layer that has not had the Anchor Point fiddled with.