How do I fit dynamic text in a Positioned DIV box?

OL Connect Professional Designer
1

Hi,

We use CSV data files which contain a field named @ChristmasMessage@ for our Christmas cards templates.

The problem is that for some records, these messages can be too long and not fit in the box provided. We then need to find a way to automatically reduce the font size so the @ChristmasMessage@ field can fit in the DIV box designed for this purpose. The default font size has been set to 12px and the width and height of the positioned div box are set to 500px and 350px respectively.

Can this be done with OL Connect? If so, how and can you please provide a demo template?

Many Thanks.

Steve

2

Hello Steve,

There is unfortunately no “simple” answer to this in the current version of Connect. This will require some scripting and most likely some amount of adjustment in order to get it right (hopefully, a “Copy Fitting” option will be available in a future version… I’ve requested it).

In the meantime, here’s somewhat of a script to help you out (I haven’t tested this - the syntax is correct but you’ll have to adjust numbers). You’ll have to create an ID for your positioned box and create a new script on that selector (aka #copy_fitting):

var christmas_message = record.field.ChristmasMessage;
if(christmas_message.length > 125) {
results.css(“font-size”, “0.75em”);
results.html(christmas_messsage);
}

What this does essentially is:

  • Get the message from the record
  • Calculate its length (in characters)
  • If there are more than 125 characters, reduce the font to 0.75em (or whatever is appropriate to you).
  • Print the message in the box.

Hopefully, this will put you on the right track.

3

Hi Evie,

Thanks for this. It works in general but it is difficult to catch text overflows with this approach. Is it possible to use a WHILE statement instead to compare the height of the DIV box and the height of the text and gradually decrease the font size?

How can we get the height of the DIV box and the height of the Message with the below script as it doesn’t appear to be returning the values as it would if it was in a html page:

_<div id=“hidden-resizer” style=“visibility: hidden”></div>

SCRIPT:
var size;
var desired_height = 15;
var resizer = query(“#hidden-resizer”);

resizer.html(record.fields[“Message”]);

while(resizer.height > desired_height) {
size = parseInt(resizer.css(“font-size”), 10);
resizer.css(“font-size”, size - 1);
}

query(“#MessageText”).css(“font-size”, size).html(resizer.html());_

Many thanks

4

This is possible to do in javascript as follows:

v```
ar font_size = font_size = parseInt($(“#MessageText”).css(“font-size”));
var container_height = parseInt($(“#MessageContainer”).css(“height”));
var text_height = parseInt($(“#MessageTextDiv”).css(“height”));



`while(text_height &gt; container_height) {`

font_size = parseInt($(“#MessageText”).css(“font-size”))-1;
$(“#MessageText”).css(“font-size”, font_size);
text_height = parseInt($(“#MessageTextDiv”).css(“height”));


`}`

Fiddle link to example here: https://jsfiddle.net/j2n79ng3/2/

However in PPCDesigner it does not work and gets caught in an endless loop, is this because it is not reading from the DOM?

Thanks

Liam

5

Hi Steve,

you can use the jQuery Plugin “TextFill” to change the fontsize of your text dynamically.

Look at the last comment in the following thread:

https://learn.objectiflune.com/discourse/t/jquery-1-11-3-not-supported/421/1

Hope that helps.

Thomas

6

In reply to Liam’s question:

font_size = parseInt($(“#MessageText”).css(“font-size”))-1;
$(“#MessageText”).css(“font-size”, font_size);

Connect HTML runs in full standards mode, which means all CSS values require units. Passing font_size + “px” in the last css call should help.

7

Hello,
do you have a solution to the topic?
Thanks

8

Hi Dan,

Check out the positioned box Copy Fit option. Right click box, select Box, Content tab, Copy fit.

Regards,
S