Skip to content

Figures

Markdown images

When you embed images in markdown with ![title](img.png) the <img> tags are wrapped in <figure> tags. This allows to add captions with <figcaption> tags.

It is recommended that you also use <figure> tags when placing images in your HTML template in text. Except for logos in headers or background images on the title page.

1
2
3
4
<figure>
  <img src="...">
  <figcaption>Caption</figcaption>
</figure>

Image width

1
2
![Image with half the page width](img.png){width="50%"}
![Exactly sized image](img.png){width="10cm" height="7cm"}

Basic styling

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
/* Image styling */
/* Prevent images from overflowing figure or page width */
img {
    max-width: 100%;
}
figure {
    text-align: center;
    margin-left: 0;
    margin-right: 0;
}
figcaption {
    font-weight: bold;
    break-before: avoid;
}

Figure numbering

Figures with captions are numbered by default as Figure <number>: <caption> and referenced as Figure <number>.

List of Figures

Template Component

Works similar like table of contents. The component uses multi-pass rendering. In the first render-pass it does nothing, in the second pass it collects all previously rendered <figcaption> tags and provides them in the variable items.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<list-of-figures id="lof" v-slot="{ items }">
  <section v-if="items.length > 0">
    <h1 class="in-toc">List of Figures</h1>
    <ul>
      <li v-for="item in items">
        <ref :to="item.id" />
      </li>
    </ul>
    <pagebreak />
  </section>
</list-of-figures>

Referencing figure numbers

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
#lof li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#lof .ref-figure::before {
  content: var(--prefix-figure) target-counter(attr(href), figure-counter) " - ";
}
#lof .ref-figure > .ref-title {
  display: inline;
}
#lof .ref-figure::after {
  content: " " leader(".") " " target-counter(attr(href), page);
}
Edit / View on GitHub