Overview


The objective of this article is to demonstrate how to apply a page count incrementer within your HTML documents. There are a few required steps and limitations that will be outlined below. As well as the essential HTML markup required. 


For the duration of this article, we will be using the following HTML document snippet to create our page counter. The same principles should work on any document. 

 

<style> ... </style>
{{#each Customers}}
<div class="page">
  ...
</div>
{{/each}}


Setting A Page Counter


Step One (Optional): Resetting The Incrementer

A "page-set" container can be utilized for any part of the document that you want to be able to reset the page incrementer for. Resetting the page incrementer is most useful within the Statement documents for resetting the page count for each Customer. However, this functionality is available for any document you may find useful. 


Below is an example of using the "page-set" container to reset the counter for each customer. Feel free to skip this step if you see no benefit to doing so. 

 

<style> ... </style>
{{#each Customers}}
<div class="page-set">
  <div class="page">
    ...
  </div>
</div>
{{/each}}


Step Two: Adding a Repeatable Element

Since page numbers need to be repeated on every page, we must also include a repeatable element container. It is important to note that repeatable elements can only be the first or last element of the page. This is a technical limitation. 


Here is how that addition will look added to our example above.


{{#each Customers}}
<style> ... </style>
<div class="page-set">
  <div class="page">
    <div class="repeatable">This will appear at the top of every page</div>
    ...
  </div>
</div>
{{/each}}

.

Step Three: Adding Placeholder Tags

We cannot support the use of tags for page numbers. Instead, we support placeholder tags. Adding a span tag with the "page-number" class will display the current page number. While adding a span tag with the "total-page-count" class will show the total page count. Including these span tags within your repeatable element will display these values on every page. Feel free to modify this markup to fit your needs. 


{{#each Customers}}
<style> ... </style>
<div class="page-set">
  <div class="page">
    <div class="repeatable">
      Page <span class="page-number"></span> of <span class="total-page-count"></span>
    </div>
    ...
  </div>
</div>
{{/each}}

Styling & Limitations

Since the repeatable elements must be the first or last element within their parent container, you may want to change the elements positioning with css. However, positioning should remain inline. Without this, you may run into styling issues. The easiest way to position elements is with absolute positioning. This should have the smallest effect on the existing document but you could also run into unforeseen collision problems. 


You are still free to style these elements as you wish. setting styles should work as intended within the style section of the document (colors, fonts, padding, etc).