<p>Make a text layer called “Text”.</p>
<p>Align the text centrally using the
Paragraph controls.</p>
<p>Make a filled rectangular shape layer beneath it.</p>
<p>Add two sliders to the shape layer called &quot;horizontal padding&quot;and &quot;vertical padding&quot;.</p>
<p>Apply this expression to the size control in the shape layer:</p>
<pre><code>var s = thisComp.layer(&quot;Text&quot;);
var w = s.sourceRectAtTime().width;
var h = s.sourceRectAtTime().height;  // note this isn't used
var paddinghorizontal = effect(&quot;horizontal padding&quot;)(&quot;Slider&quot;);
var paddingvertical = effect(&quot;vertical padding&quot;)(&quot;Slider&quot;);

[w + paddinghorizontal,100 + paddingvertical];
</code></pre>
<p>The last line of the code above sets the width and the height of the box, ie [width, height].  The height is set to 100 (an arbitrary value), plus whatever vertical padding you add later.</p>
<p>Write the largest vertical text you will need.</p>
<p>Adjust the position of the shape layer.</p>
<p>Adjust the height of the text layer using the vertical padding Slider control.</p>
<p>Adjust the horizontal padding to make it look good.</p>
<p><a href="https://i.sstatic.net/ibdbL.gif" rel="nofollow noreferrer"><img src="https://i.sstatic.net/ibdbL.gif" alt="screengrab" /></a></p>
<p><div class="youtube-embed"><div>
                <iframe width="640px" height="395px" src="https://www.youtube.com/embed/jPhERt40yoQ?start=0"></iframe>
            </div></div></p>

CC BY-SA 4.0
2021-11-01T09:16:05.820Z
2021-11-03T23:13:16.440Z
2021-11-03T23:13:16.440Z
tomh
<p>After-Effects newbie here.</p>
<p>I have many many text lines all using exactly the same font. How can I best add background color textboxes <em>with a consistent height</em>?</p>
<p>The color background must not change height depending on the text. The top two green textbox colors are what I want. The bottom two red textbox colors, changing height depending on the letters, are what I am getting.</p>
<p><a href="https://i.sstatic.net/udRbs.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/udRbs.png" alt="enter image description here" /></a></p>
<p>I tried box-blur/shift-channels techniques (<a href="https://youtu.be/hjxGLOWrmD4" rel="nofollow noreferrer">example</a>) but the textbox heights are not consistent.</p>
<p>I also tried expression techniques using <code>sourceRectAtTime()</code> on size and/or position of the shape (<a href="https://youtu.be/kI3yzx6CATg" rel="nofollow noreferrer">example</a>) but again the textbox height changes depending on letters used.</p>
<p>I am experimenting with anchors and baseline and suspect there is a solution somewhere there but I am getting very confused and suspect I am reinventing the wheel badly. Surely there must be a widely used solution for this but I cannot find it!</p>
<p>Many thanks, Polly</p>

<after-effects><after-effects-expressions>
Color textbox with consistent height
Polly
# Color textbox with consistent height

(Asked by: username_0 on 2021-10-31)

After-Effects newbie here.

I have many many text lines all using exactly the same font. How can I best add background color textboxes *with a consistent height*?

The color background must not change height depending on the text. The top two green textbox colors are what I want. The bottom two red textbox colors, changing height depending on the letters, are what I am getting.

[![enter image description here](https://i.sstatic.net/udRbs.png)](https://i.sstatic.net/udRbs.png)

I tried box-blur/shift-channels techniques ([example](https://youtu.be/hjxGLOWrmD4)) but the textbox heights are not consistent.

I also tried expression techniques using `sourceRectAtTime()` on size and/or position of the shape ([example](https://youtu.be/kI3yzx6CATg)) but again the textbox height changes depending on letters used.

I am experimenting with anchors and baseline and suspect there is a solution somewhere there but I am getting very confused and suspect I am reinventing the wheel badly. Surely there must be a widely used solution for this but I cannot find it!

Many thanks, username_0

**Tags:** after-effects, after-effects-expressions


---

## 1 answers

### Answer by username_1 on 2021-11-01. Score: 2 | Accepted answer

Make a text layer called “Text”.
Align the text centrally using the
Paragraph controls.
Make a filled rectangular shape layer beneath it.
Add two sliders to the shape layer called "horizontal padding"and "vertical padding".
Apply this expression to the size control in the shape layer:
var s = thisComp.layer("Text");
var w = s.sourceRectAtTime().width;
var h = s.sourceRectAtTime().height;  // note this isn't used
var paddinghorizontal = effect("horizontal padding")("Slider");
var paddingvertical = effect("vertical padding")("Slider");

[w + paddinghorizontal,100 + paddingvertical];

The last line of the code above sets the width and the height of the box, ie [width, height].  The height is set to 100 (an arbitrary value), plus whatever vertical padding you add later.
Write the largest vertical text you will need.
Adjust the position of the shape layer.
Adjust the height of the text layer using the vertical padding Slider control.
Adjust the horizontal padding to make it look good.


---

