Running Elements

Running elements can be positioned on the top, bottom, left or right margins of pages. Let’s take a concrete example where we want to display an address block in the bottom left box of every page.

<address class="contact-us">
  <strong>Example Inc.</strong><br>
  1234 Example Street<br>
  Antartica, Example 0987<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

First, you need to define your element as running using the position property. Here, we are using runningContact as an identifier, but you can use any name that makes sense to you:

.contact-us {
  position: running(runningContact)
}

Then, place the element into a margin box with the element() function via the content property:

@page {
  @bottom-left {
    content: element(runningContact)
  }
}

As you can see, we are using the identifier runningContact defined earlier. The above definition effectively removes the .contact-us element from the page and repeats it on every page in the bottom left box.

Here’s a complete example:

Create a file named report.adoc with the following content:
```
= 2021 Annual Report
:docinfo: private
```

Create a file named report-docinfo-running-pdf.html with the following content:

<address class="contact-us">
  <strong>Handicap International</strong><br>
  138, avenue des Frères Lumière<br>
  69008 Lyon - France
</address>

Create a file named report.css with the following content:

.contact-us {
  width: 6cm;
  position: running(runningContact)
}

@page {
  margin: 1cm 2cm 4cm 2cm;
}

@page :right {
  @bottom-left {
    content: element(runningContact)
  }

  @bottom-right {
    content: counter(page);
    margin: 10pt 10pt 30pt 0;
  }
}

@page :left {
  @bottom-right {
    content: element(runningContact)
  }

  @bottom-left {
    content: counter(page);
    margin: 10pt 0 30pt 10pt;
  }
}

Open a terminal and type:

asciidoctor-web-pdf report.adoc -a stylesheet="+report.css"

The above command will create a file named report.pdf which should look like:

In this case, you don’t need to use a docinfo file — you can declare the "contact us" block directly in the AsciiDoc file. In other words, you should get the same result using the following content:

= 2021 Annual Report

[.contact-us]
--
*Handicap International* +
138, avenue des Frères Lumière +
69008 Lyon - France
--