Bottom Align Address with copy fit

1

There is obviously a copy fit option built in to Pres connect which can be used to shrink the text down for an address block. I’m using a positioned box, right click then copy fit. I’m struggling to then bottom align the contents - usually for this I would use a table with 1 row and 1 column and bottom align it. Doesn’t give me the desired result though i.e. a box where the text shrinks if it hits the height of the box or width.

Is there a preferred method anyone has of achieving this

2

I typically use the following CSS snippet for an abs box (ID is mybox). Also checked the “Fit width only”-option for copyfitting. Attached a sample template.

#mybox {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

Admittedly we have to simplify this and prob introduce an option in the Box properties to take care of this (align bottom).

Hope this helps,

Erik

copyfit-flex-box
copyfit-flex-box.OL-template (7.7 KB)

3

Hi Erik

Really appreciate you getting back to me on this and so quickly. Solution works well and will be my preferred method.

Is there anyway to get it to flag as overflowing in the pre-flight? I noticed should the address lines be to high for the box it cuts them off but leaves no error message. Granted this should be spotted during the proofing stage with longest lines of address etc it would be useful for it to indicate its happened

Thanks
Chris

4

Hi Chris,

You could do a Preflight check (Choose: Context menu > Preflight) or create a script to check the overflow state (selector is the ID of the box). The following sets the background color of the box to red when content doesn’t fit the box.

var boxoverflow = results.overflows();
if( true == boxoverflow ){
	results.css('background-color','red');
}

Erik

5

Hi Erik

The Pre-flight is not flagging up the overflow, I’m guessing it should be? Checking the overflow is a good idea though will create a log file with the records in.

Thanks for your help

6

Hi Erik

Thanks for your help so far with this, I have one more question if I may. Bottom aligning in the way you suggest has worked when the width is overflowing, is there a way to get copy fit to activate when its bottom aligned and it overflowing vertically? Without the CSS we have added to bottom align its shrinking when the width or the height overflows?

7

The only solution I see at this stage is disabling the Copy fit option and create a basic user script to decrease the font size in case the box overflows. The following snippet is a very basic approach. It sets a base font size of 11pt. The while() statement iterates the content by checking the overflow state and checking the minimal allowed font size (in this case 8pt).

When the conditions are met it deducts 0.1 from the font size and keeps repeating this till the box no longer overlfows or when the font size reached 8pt. If so the background color of the box is set to red.

var fontSize = 11; // font-size in pt.
while( true == results.overflows() && fontSize > 8 ) {
	fontSize = fontSize-0.1;
	results.css('font-size', fontSize + 'pt');
}

if( true == results.overflows() ){
	results.css('background-color','red');
}

It is a very basic approach but it does work with the flex object used to align content to the bottom of the address block.

I have filed a bug report for the issue with the Copy fit feature. [internal ref: SHARED-82461].

Erik

8

In case its of interest to anyone else I have created the below script while we await a bug fix for copy fit. Thanks to Marten @ support for pointing out a few of my inaccuracies :slight_smile: The idea being you have a positioned box #AddressBox the address Text Script inside wrapped in a span #AddressSpan. When the span gets to big it will shrink until it fits, height and width wise. Seems to be working ok

var addressBoxHeight = query(“#AddressBox”).height();
var addressSpanHeight = query(“#AddressSpan”).height();

var fontSize = 10;
var minFontSize = 5;

results.css({
“flex-wrap”: “nowrap”,
“display”: “flex”,
“flex-direction”: “column-reverse”
});

while((fontSize > minFontSize) && ((addressBoxHeight < addressSpanHeight) || true == results.overflows()) ){
fontSize = fontSize-1;

    query("#AddressBox").css("font-size", fontSize + "pt");
	addressBoxHeight = query("#AddressBox").height();
	addressSpanHeight = query("#AddressSpan").height();

}

if(fontSize == minFontSize || true == results.overflows()){
logger.error("Record “+ record.index.toString() + " to big for window INVESTIGATE NOW”);
}

2 Likes