Correctly set font size after annotation resizing

Technical Support WebViewer
, ,
1

WebViewer Version: 10.0.1

Issue related to annotations. When user resizes annotation with freetext we want to resize font size to keep text inside annotation borders. For that the following chunk of code is used:

const prevWidth = annotation.getCustomData("prevWidth"); // annotation width before resizing 
const prevFontSize = annotation.getCustomData("prevFontSize"); // annotation font size before resizing
const fontRatio = (prevWidth /prevFontSize);
const minFontSize = 1;
const newWidth = annotation.getWidth();
const calculatedFontSize = Math.max(newWidth / fontRatio, minFontSize);
annotation.FontSize = `${calculatedFontSize} pt`;

But in some cases words can be wrapped to the next lines and text becomes truncated by bottom borders. See attached video

Does anybody have experience in this topic and share idea how to fix it?

2

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


It seems like you’re attempting to adjust the font size dynamically when resizing a FreeText annotation in WebViewer, but you’re encountering an issue where text is getting wrapped or truncated. This can happen if the calculated font size doesn’t account for line height or the vertical space needed for the text.

Some things you can try:

  • Ensure that the calculated font size considers the height of the annotation, not just the width. This may involve checking the annotation’s height and adjusting the font size accordingly.

  • Use the switchToAutoFontSize method to automatically adjust the font size based on the annotation’s bounding box. This method may simplify your approach by handling font size adjustments automatically.

  • Consider the text’s line height and padding within the annotation, which might affect how text fits within the annotation’s borders.

  • After resizing, check the getCalculatedFontSize method to verify the font size and make further adjustments if necessary.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

1 Like
4

Hello @b-dchemerevsky,

Thank you for posting on our forum.

This feature was actually implemented into the default configuration of later versions of WebViewer.

Starting in Version 10.7, there is now a checkbox when editing the styles of the tool that says “Scale font size dynamically”:

image
image583Ă—405 34.8 KB

If you would like to try this feature, feel free to check it out on our Showcase Demo here: https://showcase.apryse.com/

We recommend updating to the latest version of WebViewer to take advantage of this feature. See our FAQ here for how to do so: https://docs.apryse.com/web/faq/upgrading-webviewer

Let us know if this works for you!

Best Regards,
Jacob Romano Carlsen
Web Development Support Engineer
Apryse Software Inc.

2 Likes