# Footnotes

> Footnotes in the Document Editor: insert footnotes from JavaScript, set the number format and start number, highlight, list and remove them, footnote events.

- **Product:** TX Text Control .NET Server
- **Section:** Documentation
- **Kind:** Topic
- **Path:** TX Text Control .NET Server > Document Editor > Footnotes
- **2551 words**
- **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/footnotes/
- **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/footnotes/llms.txt
- **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/footnotes/llms-full.txt

---

Documents with references, such as reports, contracts or academic texts, use footnotes. After a look at how footnotes work in the Document Editor, you insert, number, list and remove them in code.

The examples extend the view of the [ASP.NET Core](https://docs.textcontrol.com/tx-text-control-dotnet-server/getting-started/document-editor/aspnet-core/llms-full.txt) tutorial. Footnotes were introduced in version 32.0.

### How Footnotes Work

A footnote explains, comments on or gives a reference for a place in the text. It has two parts:

- **The reference mark**, a number in the text.
- **The footnote** at the bottom of the page, which begins with a footnote mark with the same number, followed by the footnote text.

Footnotes are numbered from the beginning to the end of the document. When a footnote is inserted in front of existing footnotes, the following footnotes are renumbered, and when the text with a reference mark moves to another page, its footnote moves with it. The footnote text can use all formatting attributes and can contain tables and images.

Footnotes can be inserted in the main text, but not in headers, footers or text frames. They are saved in DOCX, RTF and the TX Text Control format, and in DOC by the Classic engine. The **References** tab of the ribbon has buttons that insert, delete and edit footnotes and set their start number and number format.

### Insert and Number Footnotes

[TXTextControl.footnotes](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/footnotes-property/llms-full.txt) returns the [FootnoteCollection](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnotecollection/llms-full.txt) of the main text. The following code inserts a footnote at the input position, numbers all footnotes with small Roman numbers and lists them. Add it below the editor in *Views/Home/Index.cshtml*:

```html
<input type="button" onclick="insertFootnote()" value="Insert Footnote" />
<input type="button" onclick="numberFootnotes()" value="Number i, ii, iii" />
<input type="button" onclick="listFootnotes()" value="List Footnotes" />

<script>
    function insertFootnote() {
        TXTextControl.footnotes.add(
            "Source: annual report, page 12.",
            null, // name
            0,    // ID; 0 for no ID
            function (response) {
                if (!response.added) {
                    console.log("No footnote can be added at this position.");
                    return;
                }
                // Name the footnote, then move the input position to the end of its text
                response.footnote.setName("source", function () {
                    response.footnote.edit();
                });
            },
            function (error) {
                console.log(error.msg);
            });
    }

    function numberFootnotes() {
        var footnotes = TXTextControl.footnotes;

        footnotes.setNumberFormat(TXTextControl.NumberFormat.SmallRomanNumbers, function () {
            footnotes.setHighlightMode(TXTextControl.HighlightMode.Always);
        });
    }

    function listFootnotes() {
        TXTextControl.footnotes.forEach(function (footnote) {
            footnote.getNumber(function (number) {
                footnote.getName(function (name) {
                    console.log("Footnote " + number + ": " + name);
                });
            });
        });
    }
</script>
```

The code works as follows:

- [FootnoteCollection.add](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnotecollection/add-method/llms-full.txt) inserts a footnote with a text at the current input position. It takes five parameters: the text, a name, an ID, a callback and an error callback. The reference allows `null` or 0 for the ID; in the Document Editor of `TXTextControl.Web` 34.5.0, `null` makes the call fail with an error, so the code passes 0. The name and ID passed to `add` weren't stored in that version either, so the code names the new footnote with [setName](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnote/setname-method/llms-full.txt) in the callback.
- The callback receives [FootnoteCallbackData](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnotecallbackdata/llms-full.txt). [added](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnotecallbackdata/added-property/llms-full.txt) tells whether the footnote was inserted, and [footnote](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnotecallbackdata/footnote-property/llms-full.txt) is the new [Footnote](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnote/llms-full.txt), or `null`.
- [Footnote.edit](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnote/edit-method/llms-full.txt) moves the input position to the end of the footnote text at the bottom of the page, so that the user can type or format it.
- [setNumberFormat](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnotecollection/setnumberformat-method/llms-full.txt) sets the numbering of all footnotes with a value of [NumberFormat](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/txtextcontrol/numberformat-enumeration/llms-full.txt): `ArabicNumbers`, `Letters`, `CapitalLetters`, `RomanNumbers` or `SmallRomanNumbers`.
- [setHighlightMode](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnotecollection/sethighlightmode-method/llms-full.txt) highlights the reference marks and footnote marks of all footnotes: `Always`, `Never`, or `Activated` for the number that contains the input position.
- [forEach](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/collection/foreach-method/llms-full.txt) calls the function for every footnote. [getNumber](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnote/getnumber-method/llms-full.txt) passes its number in the text flow, starting with 1.

Place the cursor behind a word and click **Insert Footnote**: a reference mark appears in the text, the footnote appears at the bottom of the page, and the cursor moves to the end of the footnote text.

![Letter in the Document Editor with the References tab, whose Footnotes group has the Insert, Delete, Edit, Previous, Next, Highlight Marks, Start Number and Number Format buttons, a reference mark 1 behind the words invoice date and the footnote text at the bottom of the page](https://docs.textcontrol.com/assets/img/tx-text-control-dotnet-server/footnote-page-bottom.be56fb5b.webp)

[setStartNumber](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnotecollection/setstartnumber-method/llms-full.txt) sets the number of the first footnote, for example when a document continues the numbering of another one.

### Change a Single Footnote

A `Footnote` has these methods:

| Method | Passes or sets |
|---|---|
| [getNumber](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnote/getnumber-method/llms-full.txt) | The number of the footnote |
| [setName](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnote/setname-method/llms-full.txt), [setID](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnote/setid-method/llms-full.txt) | A name and a one-based ID of your choice; an empty name or 0 means none |
| [getReferenceMarkStart](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnote/getreferencemarkstart-method/llms-full.txt), [getReferenceMarkLength](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnote/getreferencemarklength-method/llms-full.txt) | The one-based position and the length of the reference mark in the text |
| [setHighlightMode](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnote/sethighlightmode-method/llms-full.txt), [setHighlightColor](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnote/sethighlightcolor-method/llms-full.txt) | The highlighting of this footnote's marks and their color |
| [edit](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnote/edit-method/llms-full.txt) | Moves the input position into the footnote text |
| [scrollTo](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnote/scrollto-method/llms-full.txt) | Scrolls the footnote mark into view |

The JavaScript API has no method that finds a single footnote by name or ID, and none that passes the footnote text. To find a footnote, go through the collection with `forEach` and compare its name or ID. [FootnoteCollection.remove](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnotecollection/remove-method/llms-full.txt) removes a footnote and passes `true` to its callback when it was removed.

### React to Footnote Events

The editor raises these events:

- `footnoteCreated` and `footnoteDeleted` when a footnote is inserted or deleted.
- `footnoteReferenceMarkEntered` and `footnoteReferenceMarkLeft` when the input position moves to or away from a reference mark.
- `footnoteSectionActivated` and `footnoteSectionDeactivated` when the area with the footnotes at the bottom of a page receives or loses the input position.

The first four pass [FootnoteEventArgs](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/javascript/footnoteeventargs/llms-full.txt) with the name, number, ID and position of the footnote:

```javascript
TXTextControl.addEventListener("textControlLoaded", function () {
  TXTextControl.addEventListener("footnoteCreated", function (e) {
    console.log("Footnote " + e.number + " created at position " + e.referenceMarkStart);
  });
});
```

[Events](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/events/llms-full.txt) lists all events.

### Footnotes on the Server

On the server, [ServerTextControl.Footnotes](https://docs.textcontrol.com/tx-text-control-dotnet-server/reference/txtextcontrol/servertextcontrol/footnotes-property/llms-full.txt) returns the footnotes of a document, and the .NET API can also read the footnote text. [Version 32.0](https://docs.textcontrol.com/tx-text-control-dotnet-server/whats-new/3200/#footnotes) in What's New shows a C# example.

The blog article [Sneak Peek 32.0: Introducing Footnotes](https://www.textcontrol.com/blog/2023/06/23/sneak-peek-320-introducing-footnotes/) introduces footnotes with formatted text and tables.

### Next Steps

- [Tables of Contents](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/tables-of-contents/llms-full.txt): generate a table of contents from the headings of a document.
- [Headers and Footers](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/headers-footers/llms-full.txt): text that repeats on every page.
- [Text and Paragraph Formatting](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/formatting/llms-full.txt): format the footnote text.

---

## Nearby

- **Previous:** [Sections](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/sections/llms-full.txt)
- **Next:** [Tables of Contents](https://docs.textcontrol.com/tx-text-control-dotnet-server/document-editor/tables-of-contents/llms-full.txt)