# Free text annotation auto width

**URL:** <https://pdfjs.community/t/free-text-annotation-auto-width/3157>\
**Category:** Technical Support\
**Created:** [February 26, 2024, 4:18pm UTC](https://pdfjs.community/t/free-text-annotation-auto-width/3157 "2024-02-26T16:18:53Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![neeraj.khosla](https://avatars.discourse-cdn.com/v4/letter/n/f08c70/32.png) [@neeraj.khosla](https://pdfjs.community/u/neeraj.khosla)\
**Post date:** [February 26, 2024, 4:18pm UTC](https://pdfjs.community/t/free-text-annotation-auto-width/3157/1 "2024-02-26T16:18:54Z")

</div>

**Which product are you using?**  
PDF.js Express Plus

**PDF.js Express Version**  
Latest

**Detailed description of issue**  
I am trying to add free text annotations programmatically to the pdf. I have to supply a fixed height and width to the annotation in order to render it, but sometimes the content is larger than the width, in that case I want the width to be increased or expand automatically as per length of the content.

Please see the example attached. Here the text got wrapped, but ideally, it should be in one line.  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/b/bae3cf69a2d2b45ce8e00f1d3a312fd6349ba501.png)

**Things I tried**  
I tried to use the following code,  
freeText.setAutoSizeType(instance.Core.Annotations.FreeTextAnnotation.setAutoSizeType.AUTO); but its not working. The annotation got disappeared as soon as I put this code.

Can you please provide working code as an example ?

**Expected behaviour**  
Expected behaviour is to auto expand the free text annotation by increasing the width to show contents in single line.

**Does your issue happen with every document, or just one?**  
Every doc

**Code snippet**

```javascript
const freeText = new Annotations.FreeTextAnnotation();
freeText.PageNumber = 1;
freeText.X = 300;
freeText.Y = 400;
freeText.Width = 150;
freeText.Height = 50;
freeText.setPadding(new Annotations.Rect(0, 0, 0, 0));
freeText.setContents('moreandmoreandmore');
freeText.FontSize = '16pt';
freeText.Color="Red";
annotManager.addAnnotation(freeText);
annotManager.redrawAnnotation(freeText);

```

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [February 26, 2024, 7:42pm UTC](https://pdfjs.community/t/free-text-annotation-auto-width/3157/2 "2024-02-26T19:42:58Z")

</div>

Hi there,

You can use the setAutoSizeType but this is applied when clicking into the editor.

For example, if you put the provided code into the [demo](https://pdfjs.express/demo):  
Initially the autoSize property is set to none:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/0/094fa6ce2f7fb7e8df2d2870ee00eae3a92c015d.jpeg)

After setting the autoSize property:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/6/605ed7fd0e411fe05e0f091efd6210f6b1379294.png)

And then after double-clicking the annotation to go into the text editor:

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/6/61ebab953d28a85ce1005487d6ef2c81b77dac12.jpeg)

Best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![neeraj.khosla](https://avatars.discourse-cdn.com/v4/letter/n/f08c70/32.png) [@neeraj.khosla](https://pdfjs.community/u/neeraj.khosla)\
**Post date:** [February 27, 2024, 5:02am UTC](https://pdfjs.community/t/free-text-annotation-auto-width/3157/3 "2024-02-27T05:02:55Z")

</div>

Thanks for explaining the autoSize property.

But the question is still there. While rendering a freetext annotation through code, how to make sure that the contents fits in one line as per the length of the contents.

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [February 27, 2024, 6:27pm UTC](https://pdfjs.community/t/free-text-annotation-auto-width/3157/4 "2024-02-27T18:27:03Z")

</div>

Hi there,

You can set the freetext’s autosize property to auto during the creation:

```javascript
const freeText = new Annotations.FreeTextAnnotation();
freeText.PageNumber = 1;
freeText.X = 300;
freeText.Y = 400;
freeText.Width = 150;
freeText.Height = 50;
freeText.setPadding(new Annotations.Rect(0, 0, 0, 0));
freeText.setContents('moreandmoreandmore');
freeText.FontSize = '16pt';
freeText.Color="Red";
freeText.setAutoSizeType('auto')
await annotationManager.addAnnotation(freeText);
await annotationManager.redrawAnnotation(freeText);

```

best regards,  
Kevin Kim

---

<div class="post-metadata">

**Author:** ![neeraj.khosla](https://avatars.discourse-cdn.com/v4/letter/n/f08c70/32.png) [@neeraj.khosla](https://pdfjs.community/u/neeraj.khosla)\
**Post date:** [February 28, 2024, 6:24am UTC](https://pdfjs.community/t/free-text-annotation-auto-width/3157/5 "2024-02-28T06:24:53Z")

</div>

Its still not working. When I add the code freeText.setAutoSizeType(‘auto’) , the freetext annotation disappears. Please check the video here.

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [February 28, 2024, 5:56pm UTC](https://pdfjs.community/t/free-text-annotation-auto-width/3157/6 "2024-02-28T17:56:36Z")

</div>

Hi there,

Could you please try refreshing the page after making the changes to the code?  
Sometimes react has an issue with rerendering the viewer instance on the same html element on a hot reload.

Best regards,  
Kevin Kim