# Is there an option for numbered annotations? (ie. footnotes/references)

**URL:** <https://pdfjs.community/t/is-there-an-option-for-numbered-annotations-ie-footnotes-references/867>\
**Category:** Technical Support\
**Created:** [July 2, 2021, 2:29am UTC](https://pdfjs.community/t/is-there-an-option-for-numbered-annotations-ie-footnotes-references/867 "2021-07-02T02:29:43Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![tmaiaroto](https://avatars.discourse-cdn.com/v4/letter/t/e56c9b/32.png) [@tmaiaroto](https://pdfjs.community/u/tmaiaroto)\
**Post date:** [July 2, 2021, 2:29am UTC](https://pdfjs.community/t/is-there-an-option-for-numbered-annotations-ie-footnotes-references/867/1 "2021-07-02T02:29:43Z")

</div>

Is there the ability to have annotations numbered? Adding a number to the actual PDF next to the annotation so that these can be referenced? I’m looking to export annotations/comments and correlate them back to the actual annotation on the PDF.

The blue line with arrow is super convenient while within the viewer, but having a number is helpful when exporting.

So something like a stamp perhaps but combined/grouped with any other annotation. Maybe that’s one way to go about it? Though the stamp or image in this case wouldn’t be a separate annotation itself. Or at least not present as one.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [July 2, 2021, 2:29am UTC](https://pdfjs.community/t/is-there-an-option-for-numbered-annotations-ie-footnotes-references/867/2 "2021-07-02T02:29:48Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:
- [PDF.js Express annotations](https://pdfjs.express/documentation/annotation/overview)
- [Merge & extract annotation in PDF.js Express](https://pdfjs.express/documentation/annotation/merge-and-extract)
- [Import and export annotations using a database](https://pdfjs.express/documentation/annotation/import-export/database)

APIs:
- [CoreControls.Document - getDownloadLink( [options])](https://pdfjs.express/api/CoreControls.Document.html#getDownloadLink__anchor)
- [Annotations.StampAnnotation - resourcesLoaded()](https://pdfjs.express/api/Annotations.StampAnnotation.html#resourcesLoaded__anchor)
- [ExpressUtils(optionsopt) - # async set() → {Promise.}](https://pdfjs.express/api/utils/ExpressUtils.html#set__anchor)

Forums:
- [Random Comments in annotation](https://pdfjs.community/t/random-comments-in-annotation/240/1)
- [Is there an API method that counts the number of comment annotations on a PDF? How would one go about getting this value?](https://pdfjs.community/t/is-there-an-api-method-that-counts-the-number-of-comment-annotations-on-a-pdf-how-would-one-go-about-getting-this-value/538/1)
- [Download pdf with annotations(fields data + signatures)](https://pdfjs.community/t/download-pdf-with-annotations-fields-data-signatures/355/4)

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [July 6, 2021, 6:31pm UTC](https://pdfjs.community/t/is-there-an-option-for-numbered-annotations-ie-footnotes-references/867/3 "2021-07-06T18:31:38Z")

</div>

Hi there!

Sorry for the delay here, I was away for a few days.

Just to be clear, you just want to display a number beside each annotation in the document? If you could explain your use case and what it looks like for the end user that would be helpful.

Thank you!  
Logan

---

<div class="post-metadata">

**Author:** ![tmaiaroto](https://avatars.discourse-cdn.com/v4/letter/t/e56c9b/32.png) [@tmaiaroto](https://pdfjs.community/u/tmaiaroto)\
**Post date:** [July 7, 2021, 9:27pm UTC](https://pdfjs.community/t/is-there-an-option-for-numbered-annotations-ie-footnotes-references/867/4 "2021-07-07T21:27:13Z")

</div>

No problem, I appreciate your help here!

Yes, I just want to display a number along with each annotation. That way if exported the numbers (embedded images/svg at that point I guess) will be visible with the various annotations. I can export a separate sheet of comments that are all numbered as well. Now people looking at a printed copy can see all of the comments around each annotation.

Basically imagine a number to the bottom right of each annotation in terms of visuals. It need not be bottom right, but that’s where we were thinking.

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [July 8, 2021, 2:36pm UTC](https://pdfjs.community/t/is-there-an-option-for-numbered-annotations-ie-footnotes-references/867/5 "2021-07-08T14:36:44Z")

</div>

Hi there,

I tried thinking about this for a bit and I do not think there is a good way to accomplish this use case. Each type of annotation has its own rendering method and you would essentially have to override each one of those and add the number drawing functionality (annotations are drawn on a canvas).

Sorry about this! This just isn’t a scenario we can easily accommodate at the moment.

Logan

---

<div class="post-metadata">

**Author:** ![tmaiaroto](https://avatars.discourse-cdn.com/v4/letter/t/e56c9b/32.png) [@tmaiaroto](https://pdfjs.community/u/tmaiaroto)\
**Post date:** [July 8, 2021, 5:10pm UTC](https://pdfjs.community/t/is-there-an-option-for-numbered-annotations-ie-footnotes-references/867/6 "2021-07-08T17:10:48Z")

</div>

Ok. How about just the Note annotation? Those have icons which can be customized correct?

I guess kinda like stamps. Do these icons need to be images? Or can they be SVGs where I could adjust text for the numbering?

I’m thinking if all annotations can’t easily be numbered, maybe at least specific ones can. So a user can decide to place a numbered pin on the PDF with comments.

So instead of the blue Note icon, maybe an SVG circle with number inside.

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/e4e3518c08f43f75763baff06b2880bafea13014.png)

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [July 12, 2021, 3:39pm UTC](https://pdfjs.community/t/is-there-an-option-for-numbered-annotations-ie-footnotes-references/867/7 "2021-07-12T15:39:24Z")

</div>

Hi there,

Most annotations are actually drawn on a Canvas, so they can’t be easily adjusted with an SVG. We do provide an option to override the drawing function on annotations, but its on a per annotation type basis.

Something else to note:

- Annotations are not rendered in a guaranteed order, so you would have to maintain the “number” of each annotation in your own external state.

That being said, here is how you can override the draw function:

```javascript
  const { Annotations } = instance;

  Annotations.setCustomDrawHandler(Annotations.StickyAnnotation, function (ctx, pageMatrix, rotation, options) {
    options.originalDraw(ctx, pageMatrix)
    const number = 1;
    const annot = options.annotation;

    const width = annot.Width;
    const height = annot.Height;
    const padding = 10;

    ctx.font = "20px Arial";
    ctx.fillText(`${number}`, width + padding, height + padding);
  })

```

You will have to figure out how to dynamically assign `number` to each annotation. One potential solution is listening for new annotations and then assigning each new annotation a number in a cache somewhere (something like this works for me):

```javascript
  const { Annotations } = instance;

  let lastIndex = 0;
  const annotMap = {};

  instance.annotManager.on('annotationChanged', (annots, action, e) => {
    annots.forEach(annot => {
      if (action === 'add' && !e.imported) {
        const id = annot.Id;
        lastIndex++;
        annotMap[id] = lastIndex;
      }
    })
  })

  Annotations.setCustomDrawHandler(Annotations.StickyAnnotation, function (ctx, pageMatrix, rotation, options) {
    options.originalDraw(ctx, pageMatrix)

    const annot = options.annotation;
    const number = annotMap[annot.Id];
    const width = annot.Width;
    const height = annot.Height;
    const padding = 10;

    if (number) {
      ctx.font = "20px Arial";
      ctx.fillText(`${number}`, width + padding, height + padding);
    }
  })

```

The last part of the equation is calling `setCustomDrawHandler` on all the annotation types you want to override.

I hope this helps!

Thanks,  
Logan

---

<div class="post-metadata">

**Author:** ![tmaiaroto](https://avatars.discourse-cdn.com/v4/letter/t/e56c9b/32.png) [@tmaiaroto](https://pdfjs.community/u/tmaiaroto)\
**Post date:** [July 19, 2021, 4:37pm UTC](https://pdfjs.community/t/is-there-an-option-for-numbered-annotations-ie-footnotes-references/867/8 "2021-07-19T16:37:58Z")

</div>

Thank you so much for taking the time to put this together! I’ll give it a shot. It makes sense and I think should work.

This can be done for any annotation?

`originalDraw()` will produce the original annotation? So this effectively “appends” to that? I think that’d be perfect if I’m understanding that correctly.

---

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [July 22, 2021, 7:39pm UTC](https://pdfjs.community/t/is-there-an-option-for-numbered-annotations-ie-footnotes-references/867/9 "2021-07-22T19:39:31Z")

</div>

Hey!

Yes this should be doable with any annotation. And yes `originalDraw` will draw the original annotation, meaning this basically appends to it.

Thanks,  
Logan