NumberFigures

Updated on 2025-02-21

Kirill Kryukov

Summary

This page is about a script for automatic numbering of figures and tables in HTML documents. Crucially, the script also updates all references to figures and tables in the text. How it works: When editing the page, you give each figure and table a name, and you use these names for referring to these figures and tables in your text. When the page loads, the script scans the page and changes all names to numbers.

Example page using this script: 4x4 Chess.

How to use

  1. Download the NumberFigures.js script, and save it alongside your html file.
  2. In the <head>...</head> part of your page, add this line:
    <script src="NumberFigures.js"></script>
  3. Add the onload handler to the <body> tag:
    <body onload="NumberFigures();">
  4. Use <figure> and <figcaption> tags when adding figures to the page:
    <figure class="fig">
    <img src="...">
    <figcaption>Fig. "CoolFigure". Look at our cool result.</figcaption>
    </figure>
  5. When mentioning this figure in the text, use this form:
    As <span class="figref">Fig. "CoolFigure"</span> clearly shows, ...
  6. For tables, do the same, but use <figure class="table"> and <span class="tableref">.

Note that <figcaption> must start with Fig. or Figure for figures, and Table for tables.

Download

Please download and host your own copy of the script. (Or risk having your page broken when anything happens to our copy).

License

The script and this page are placed in the public domain using the CC0 license.

Why?

Why number figures? This enables referring to specific figure or table from any part of the text. Without numbers, you can still write something like "The next figure shows ...", but referring to a figure a few paragraphs up or down becomes much harder. Instead, we assign a number to each figure in the order of appearance, and simply write "See Fig. 15" whenever we need to refer to a particular figure.

Why author raw HTML? (instead of, e.g., using MS Word or LaTex.) We appreciate HTML's simplicity in the current world of overcomplicated software systems. A few <h2>, <p>, <img> and <a> tags might be all you need for writing up a brief report. The report can be then uploaded to any generic hosting server, and instantly shared with the world, without depending on any CMS, PDF renderers, or other monstrosities (other than a web browser).

Why use this script instead of manual numbering? So that you can add or remove a figure in the middle of your document, and have the rest of the figures re-numbered automatically, including their mentions in the text.

More details

What if JavaScript is turned off? All figures then show up under their original names as written in the HTML. This is less pretty, but the document is still entirely usable.

What if <body> already has an onload handler? Add a new handler that calls both functions:
<script>function start() { PreviousHandler(); NumberFigures(); }</script>
Then, install it as:
<body onload="start();">

What characters can be used in figure names? Latin letters, digits, hyphen and underscore:
[a-zA-Z0-9\-_]+.

What happens if multiple figures share the same name? They are still numbered correctly, but only the last one will be referred to in the text.

Are multi-page documents supported? No.

Does the script check if each figure is mentioned in the text? Currenty no, but this might be cool to add.

Does the script support the figure jumping out at you when you hover the mouse over its reference in text? My god, no. But feel free add any such misfeature.

Contact

Please send any feedback to kkryukov@gmail.com.