Skip to main content
T
theblankbeard
Known Participant
December 7, 2018
Answered

Text with auto resizing box issues

  • December 7, 2018
  • 3 replies
  • 4732 views
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]

    This topic has been closed for replies.
    Correct answer Kyle Hamrick

    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

    3 replies

    R
    Community Expert
    Rick GerardCommunity Expert
    Community Expert
    June 15, 2021

    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.

      Sandra M. Lopes
      Sandra M. Lopes
      Participating Frequently
      July 20, 2024

      Photoshop scripting newbie here, so please excuse my utter ignorance... what if the shape is much more complex than a "simple" rectangle?

      I have a case where a shape defines not only how the text should flow, but, much more importantly, it contains some underlying elements that are the background of only the text. If the shape is changed (manually), then I wish the text to change as well. Since this seems to be impossible, the next best option seems to be to force the shape layer to replicate the shape on the text, and only change the text (ever).

      I suppose that in such a scenario with a complex shape, sourceRectAtTime() will ultimately fail, since it assumes there ought to be a Rectangle there?...

      I'm just trying to learn something 🙂 Thanks in advance for any insights, your solution seems to be much more elegant (and perfectly logical to me) than @Rick Gerard's — but I admit it's a personal choice, of course.

      R
      Community Expert
      Rick GerardCommunity Expert
      Community Expert
      July 20, 2024

      I have used sourceRecAttTime() to accurately and dependably put all kinds of backgrounds behind a text layer, follow that text layer anywhere you put it in a 2D or 3D comp, react to scale animation, and perfectly interact with any text animator you wish to create. You simply add up the sizes and control the anchor point. You can even use sourceRectAtTime() to control or animate the starting and ending points of gradient fills and opacity changes.

       

      You can also use the data from sourceRecAtTime() to change the scale, tracking, leading, and even force line breaks if you need the background to stay the same. You could also automate the size, position, and even animation of a text background and keep the text properly positioned inside the background. I can not think of a single text layer with a background that could not be automated using an expression when you pull size values from sourceRectAtTime().

      The expressions get complicated, but the rigs are easily saved as Animation Presets, and they work perfectly with MOGRTS to simplify graphic design for Premiere Pro. 

       

      I will release a tutorial series on automated text background workflows sometime in the next few weeks. The series will include several MOGRTs that you can use as they are or easily modify to fit a modified background design. 

       

      My Quick Tips Playlist

      Kyle Hamrick
      Community Expert
      Kyle HamrickCommunity ExpertCorrect answer
      Community Expert
      December 7, 2018

      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

        T
        theblankbeardAuthor
        Known Participant
        December 7, 2018

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

          Mylenium
          Mylenium
          Legend
          December 7, 2018

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

          Mylenium

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices