Repeat text string the width of a DIV

OL Connect Professional Designer
1

How can I repeat a text string for the width of the div?
No wrapping or overflow, just truncate the string at the end.
OL Connect 2024.1 using handlebars.
This would be for microprint

 .microprint {
     font-family: Arial, sans-serif;
     font-size: 3pt;
     line-height: 1.2;
     color: #000;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
2

I know the size of the div and the size of the font (static sized), just not the text string being used
Rather it can vary a bit, so I have different lengths.

I modified the CSS

.microprint {
    font-family: Courier, monospace;
    font-size: 1pt;
    line-height: 1.2;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    height: 100%; /* Ensure the div takes the full height */
}

I have it working using @microprint@, but can’t get {{microprint}} to work.

var field, result = "";
field = record.fields.microprint.toUpperCase().replace(/ /g, '\u25A0');
if (field !== "") result += field;

function generateMicroprint(field, divWidth, charWidth) {
    var repeatCount = Math.floor(divWidth / (field.length * charWidth));
    return field.repeat(repeatCount);
}

var divWidth = 816; // Width of the div in pixels
var charWidth = 0.5; // Estimated width of each character in pixels for 1pt Courier

var repeatedText = generateMicroprint(result, divWidth, charWidth);
results.html(repeatedText);
3

I forgot that this template was originally started with an older version, and even though I remember enabling handlebars, I apparently must not have save it afterwards.

image

1 Like
4

Dear @UomoDelGhiaccio ,

I am glad to hear that you have it working.

Would you mind sharing the settings that you have applied in the Edit Script window of the Standard Script by which you got it working?

Tip: Instead of using a set value for the following line of JavaScript code:

var divWidth = 816; // Width of the div in pixels

You could also consider to apply the following line of JavaScript code instead:

var divWidth = results.width();

width(): Number

Returns the outer width of this element, including padding and borders, excluding margins. To include margins, call width(true).

The returned value is the width in pixels, without measurement unit (e.g. 400).

Source: width() - OL Connect 2024.1 Help

5

I believe that this is what your are looking for.

image
image729×506 20.7 KB

<div id="microprinttop" class="microprint" anchor="page_media_0"
style="position: absolute; overflow: hidden; box-sizing: border-box; width: 816px; height: 10px; top: -0.00479924px; left: -37.8px;" offset-x="-7.629394502828291e-7" offset-y="37.79519999706055">
    {{{microprint}}} 
</div>
<div id="microprintbot" class="microprint" anchor="page_media_0"
style="position: absolute; overflow: hidden; box-sizing: border-box; width: 816px; height: 10px; top: 970.388px; left: -37.8px;" offset-x="-7.629394502828291e-7" offset-y="1008.1879992370606">
    {{{microprint}}} 
</div>
<div id="sigtopleft" class="microprint" anchor="page_media_0"
style="position: absolute; overflow: hidden; box-sizing: border-box; width: 192px; height: 10px; top: 326.35px; left: 159.767px;"
siglt"="" offset-x="197.56699923706054" offset-y="364.14999923706057">
    {{{microprint}}} 
</div>
<div id="sigtopright" class="microprint" anchor="page_media_0"
style="position: absolute; overflow: hidden; box-sizing: border-box; width: 192px; height: 10px; top: 326.35px; left: 514.767px;"
siglt"="" offset-x="552.5669992370606" offset-y="364.14999923706057">
    {{{microprint}}} 
</div>
<div id="sigbotleft" class="microprint" anchor="page_media_0"
style="position: absolute; overflow: hidden; box-sizing: border-box; width: 192px; height: 10px; top: 771.35px; left: 158.767px;"
siglt"="" offset-x="196.56699923706054" offset-y="809.1499992370606">
    {{{microprint}}} 
</div>
<div id="sigbotright" class="microprint" anchor="page_media_0"
style="position: absolute; overflow: hidden; box-sizing: border-box; width: 192px; height: 10px; top: 771.35px; left: 514.833px;"
siglt"="" offset-x="552.6329992370606" offset-y="809.1499992370606">
    {{{microprint}}} 
</div>

The .width() will help because I have two different sized div’s.
A line of microprint on the top and bottom of the page and the signature lines in each of the 4 quadrants.

Trying to replicate the microprinting function and font from PPSv7 in OL Connect 2024.1
Are there any recommendations or adjustments you would suggest?

microprintfont.txt (26.1 KB)
microprintfont(PPSv7).txt (27.3 KB)
microprinting function.txt (912 Bytes)

1 Like
6

Tip: Please note that the shared HTML contains invalid HTML (search for siglt"="").

7

Thanks, I didn’t notice it and replicated it using copy and paste.

I also added some line spacing to make the microprint more readable.

.microprint {
    font-family: Courier, monospace;
    font-size: 1pt;
    line-height: 1.2;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    height: 100%; /* Ensure the div takes the full height */
    letter-spacing: 0.15px; /* Adjust the value to increase or decrease spacing */
}