CopyFit not working as expected

TSled · July 19, 2022, 5:32pm

Hello,

My CopyFit isn’t working in my template. I have a box setup as a paragraph. The paragraph is variable, if it’s too big to fit, I’d like the font to shrink. I clicked the box and chose checkmarked the box CopyFit. I made my min and max fonts but the text doesn’t shrink the box. Attached is the screenshot of my setup. Is there something that I’m doing wrong?

Sander · July 19, 2022, 6:18pm

Would you mind sharing what the inner HTML of the box looks like?

TSled · July 20, 2022, 12:36pm

Hi Sander,
This is the the HTML: (I removed all of the “<” to get the code to show.
div
data-copyfit=“{"minSize":"10pt","maxSize":"15pt","widthOnly":false,"childSelector":""}”
anchor=“page_media_0”
style=“position: absolute; overflow: hidden; box-sizing: border-box; width: 492px; height: 124px; top: 132.634px; left: 1118.98px; text-align: center; background-size: auto auto; display: block;” offset-x=“1118.9761” offset-y=“132.634”>
p style=“line-height: 40px; margin-top: 10px; margin-bottom: 10px;”>
span style=“font-family: "Gill Sans Nova Light"; font-size: 42pt;”>Meet @chn_fname@

/span>
/p>
div style=“position: absolute; overflow: hidden; box-sizing: border-box; width: 218px; height: 305px; top: 127.183px; left: 110.733px;”>
div style=“position: absolute; overflow: hidden; box-sizing: border-box; width: 200px; height: 200px; top: -26.8333px; left: -307.267px;”>
div style=“position: absolute; overflow: hidden; box-sizing: border-box; width: 217px; height: 296px; top: 134.167px; left: 110.733px;”>
div style=“position: absolute; overflow: hidden; box-sizing: border-box; width: 200px; height: 200px; top: 205.167px; left: 120.733px;”>
div style=“position: absolute; overflow: hidden; box-sizing: border-box; width: 475px; height: 26px; top: 556.333px; left: -545px;”>
div style=“position: absolute; overflow: hidden; box-sizing: border-box; width: 200px; height: 200px; top: 141.417px; left: -983.233px;”>
/div>

Sander · July 20, 2022, 1:22pm

Thanks!

Copy Fit works by changing the font size of one particular element. If you leave the Child input field empty the target element is the box itself (i.e. the div). Any absolute font size set on a child element (in your case the span with a font size of 42pt) will be changed to a relative font size so that it keeps the same font size relative to the font size of the div.

You can do one of two things:

Move the 42pt font-size style from the span to the div
Set the Child input field to “span” (without the quotes)

Hope that helps,
Sander

TSled · July 21, 2022, 1:17pm

Continuing the discussion from CopyFit not working as expected:

Hi Sander,
Thank you for the suggestion, I moved the 42pt font-size to the div box and nothing changed. Screenshot below of the HTML.

I also tried entering span into the Child Input field but it just sets the Font to the max size instead of fitting it into the box.

I will be deleting the box and retry again with the suggestions incase I mucked something up during the testing.

Sander · July 21, 2022, 1:43pm

It looks like you accidentally set the font size on the p instead of the div.

I tried both methods with your HTML and they work for me. Are you perhaps looking at this in design mode? You need to switch to preview mode to see the effects of Copy Fit.

Edit: Scratch that, sorry. Of course you switched to preview mode, the name is variable.

Edit 2: Just to clarify, I only tried it with your original HTML. I see that you modified it slightly, the p now has a larger line height and no margins. It shouldn’t matter, but maybe that changes something.

TSled · July 21, 2022, 2:01pm

Can you let send me your html if you don’t mind?

Sander · July 21, 2022, 2:27pm

Based on your original HTML, moving the font size to the div:

<div
data-copyfit="{&quot;minSize&quot;:&quot;10pt&quot;,&quot;maxSize&quot;:&quot;42pt&quot;,&quot;widthOnly&quot;:true,&quot;childSelector&quot;:&quot;&quot;}"
anchor="page_media_0"
style="font-size: 42pt; position: absolute; overflow: hidden; box-sizing: border-box; width: 355px; height: 60px; top: 132.005px; left: 117.998px; text-align: center;" offset-x="155.7984" offset-y="169.80499923706054">
    <p style="line-height: 40px; margin-top: 10px; margin-bottom: 10px;">
        <span style="font-family: Gill Sans Nova Light;">Meet Christopher Alexander</span>
    </p>
</div>

Based on your original HTML, with the Child input field set to span:

<div
data-copyfit="{&quot;minSize&quot;:&quot;10pt&quot;,&quot;maxSize&quot;:&quot;42pt&quot;,&quot;widthOnly&quot;:true,&quot;childSelector&quot;:&quot;span&quot;}"
anchor="page_media_0"
style="position: absolute; overflow: hidden; box-sizing: border-box; width: 355px; height: 60px; top: 132.005px; left: 117.998px; text-align: center;" offset-x="155.7984" offset-y="169.80499923706054">
    <p style="line-height: 40px; margin-top: 10px; margin-bottom: 10px;">
        <span style="font-size: 42pt; font-family: Gill Sans Nova Light;">Meet Christopher Alexander</span>
    </p>
</div>

Note: In your new HTML you applied a line height of 60px to the p, which is larger than the maximum font size. I don’t think that will work well. In fact I think it would be better to remove the line height style.

TSled · July 21, 2022, 3:34pm

I think there may have been too many DIV box settings in mine. I took your div box setting and replaced my entire div box with it. I repositioned the box and it seems to be working properly now.

Thank you!