Problem
Motion-graphics text becomes cropped because a responsive title box does not expand with longer translated text.
Solution
Root Cause / Diagnostic:
Static bounding shape layers rely on fixed path dimensions or pixel offsets that do not poll text box metric properties at runtime. When localized or translated copy exceeds the source string length, the fixed path layer fails to adjust its width or height. This results in characters overflowing past the graphic background boundary or getting clipped by parent layer track mattes.
Actionable Fix:
1. Link the background shape's Size property to the text layer using dynamic sourceRectAtTime expressions: s = thisComp.layer("TitleText").sourceRectAtTime(); [s.width + 60, s.height + 40].
2. Anchor the shape position to [s.left + s.width/2, s.top + s.height/2] to ensure symmetric expansion across all four quadrants.
3. Test localized strings of varying lengths (e.g., German and Spanish translations) to verify that padding remains constant around text edges.
Pro Tip:
Combine sourceRectAtTime() with Math.max() to enforce a minimum width and height, preventing the background banner from collapsing on single-character or short words.
Static bounding shape layers rely on fixed path dimensions or pixel offsets that do not poll text box metric properties at runtime. When localized or translated copy exceeds the source string length, the fixed path layer fails to adjust its width or height. This results in characters overflowing past the graphic background boundary or getting clipped by parent layer track mattes.
Actionable Fix:
1. Link the background shape's Size property to the text layer using dynamic sourceRectAtTime expressions: s = thisComp.layer("TitleText").sourceRectAtTime(); [s.width + 60, s.height + 40].
2. Anchor the shape position to [s.left + s.width/2, s.top + s.height/2] to ensure symmetric expansion across all four quadrants.
3. Test localized strings of varying lengths (e.g., German and Spanish translations) to verify that padding remains constant around text edges.
Pro Tip:
Combine sourceRectAtTime() with Math.max() to enforce a minimum width and height, preventing the background banner from collapsing on single-character or short words.