Dynamic text sizing

[chrisvxd]

Consider adding dynamic text sizing for all free templates, similar to the custom template for wellpaid.io.

In the mean time, this can be achieved using a custom template in the Pro tier.

A customer asked for this, but unfortunately tawk scheduling wasn't setup correctly so I wasn't able to respond. Please comment below if that was you 👇

[slig]

Hi,

It wasn't me, but I'm interested and started working on this in the weekend.

This snippet seems to work fine locally on a test setup and I was trying to make it work on ogimpacteditor:

<script>
const autoSizeText = function() {
  const decreaseSize = function(el) {
    const elNewFontSize = parseInt(getComputedStyle(el)['font-size'].slice(0, -2)) - 1;
    el.style.fontSize = elNewFontSize + 'px';
  };

  document.querySelectorAll('.resize').forEach((el) => {
    while (el.scrollHeight > el.offsetHeight) {
      decreaseSize(el);
    }
  });
};
document.addEventListener('DOMContentLoaded', autoSizeText);
</script>

Couldn't make it work on the editor, and I couldn't figure out if using a script tag was the issue.

Do you think this is a good approach? In my use case specifically I'm only using puppeteer-social-image, so custom templates are not an issue.

Thanks a bunch for open-sourcing this!

[transitive-bullshit]

@chrisvxd the script issue in the template editor is because React's dangerouslySetInnerHtml isn't actually dangerous and disables scripts. See here for a workaround, as I think custom scripts like this are a reasonable use case.

@slig Looks reasonable, though I would recommend only initiating this after any custom fonts are loaded. I'm using a very similar approach for a related project.

[chrisvxd]

@transitive-bullshit thats odd because I have scripts working in a custom template for wellpaid.io. I’ll have to investigate this when I get a moment.

@slig will let you know re above.

[chrisvxd]

@transitive-bullshit Scratch that I just noticed you said editor. The iframe uses dangerouslySetInnerHtml, but the live preview shouldn’t as it actually runs via puppeteer social image in a lambda. Still, iframe should run scripts correctly.

[chrisvxd]

In the past I've used fitty and this snippet at the end of my body

<script>
  fitty('.Social-title', {
    minSize: 80,
    multiLine: true
  });
  
  fitty('.Social-subtitle', {
    maxSize: 72,
    minSize: 56,
    multiLine: true
  });
</script>

[slig]

Thanks, @chrisvxd! Fitty looks nice and more capable, might switch to it if the naive approach isn't good enough.

@transitive-bullshit, thanks for sharing your code as well and for pointing out why the script tag doesn't work with dangerouslySetInnerHtml. TIL.