Loading issue dynamic text size scaling on load (TextFit.js)

[BannerMan]

Hi all,

I'm running against an issue with loading the TextFit function before the ad is loaded and running.

Last week I've made another topic to create dynamic elements in Hype to load Adcombi's text and image feed, in which @MarkHunte came with a magical solution.

One issue I found with working with dynamic text is that it quickly overflows when larger words or more characters are used then intended. Hence I found a cool text scaling library (TextFit.js) that scales down the font size to fit text into it's container.

Initially this worked great, however there are some issues when a little bit more characters are used then intended, It's overflowing at the bottom. The weird thing is that the issue appears in the initial first session when the assets aren't loaded yet (or when the cache is emptied (Cmd/shift/R), or is played in a different browser / incognito).

Once it's been loaded once, it will work properly when loaded again/refreshed. For comparison in this dummy project (red box = the text container):

Without TextFit:

With TextFit loaded for the first time:

When TextFit is loaded/cached once:

On prepare for display I'm running the TextFit function first, followed by the ParseHTML from the topic above.

Additional of doing it in the prepare for display, I've also tried it manually with an Event listener for the DOMContentLoaded. However, this resulted in the same result.

I figure the issue is that its not loading/refreshing properly in the initial load for some reason. Weirdly enough when I packaged/tested the creative in Google's HTML5 validator it didn't give any issues there, even with an emptied cache, since I think its waiting for the entire ad to load fully before serving it.

I hope someone has had an experience like this, or knows a good solution to let the banner wait to load fully before serving it, or perhaps refreshes the text element after some time to force it to format properly.

For the sake of an example, I've loaded dummy content in the banner to provide some files:

Hype project:
Hype_TextLoad.hype.zip (22.9 KB)

Clean package where Hype is implemented in the Adcombi format:
Adcombi_package.zip (137.3 KB)

[MaxZieb (Loves Hype)]

I have only looked at the code screenshots, but not your file as I am on my mobile phone. It is most certainly an execution order problem…

Either it is as simple as changing the order of the two functions calls. Text fit AFTER inserting dynamic data.

Or you would need some sort of event listener for content updates and then run the text fit function after the content has been updated.

[BannerMan]

Yes, I think its an order or timing issue too, I've tried changing the order to have TextFit run after the parser, but it won't load at all once its in this order.

I've also tried to run the functions in different states, so TextFit on prepare for display and the Parser on Scene load, but that didn't solve it either. So right now I'm looking into some way to refresh the DOM element after 50ms, since the text won't be animated in for a whole second.

[Daniel]

It seems to work if I run it as a timeline action. At this point, the function will know how long the content is and can act on it. It's unclear why it doesn't behave the same way when using 'on prepare for display'.

[BannerMan]

When previewing out of Hype directly it will show up without issues. However, once exported and played locally and/or through the live plugin from visual studio, it's showing the bugged variant if you have an empty cache.

Somehow I wished I could force a total reload 100/200ms into the banner, as i've tried reloading individual div elements, but couldn't get to work unfortunately.

[MaxZieb (Loves Hype)]

You are using text fit on SloganBox... I just saw that this is in your head HTML... that doesn't make sense or am I missing something here? Why would you want to fit an id not even in your banner? If you are trying to target the copy, this is not possible because Id's have to be unique.

You could do something like:

	var infoboxes = {"DynBox1":"Dyn1","DynBox2":"Dyn2","DynBox3":"Dyn3"} 		
	for(var infobox_key in infoboxes) {
	  	var htmlObject = allText.querySelector("." + infoboxes[infobox_key]);
		hypeDocument.getElementById(infobox_key).innerHTML = htmlObject.innerHTML.replaceAll('id="','id="Copy_');
	}

And then you would target

textFit(hypeDocument.getElementById('Copy_SloganBox'), {minFontSize:10, maxFontSize: 24});