Print Header with Page Break/Number

You can create a printer header with page breaks and page numbers using some CSS and HTML.

Header design example

Keep in mind that currently, the page break only works in PC/laptop devices on all browsers, but does not work in iOS mobile devices. You can read more about break-before CSS in the MDN docs.

The JS

None

The HTML

Use Knack's Rich Text View to create the header. On the knack app itself you will have to add the headers based on how many pages.

First Header

On line 1 you want to include the style="break-before: avoid;" to prevent adding a page break before the first page header.

<div class="image-header-container" style="break-before: avoid;">
	<span class="image-seal"></span>
	<span class="text-header">
	<span class="header-title">Transportation and Public Works Department</span>
	<br>Mobility Services
	<br>1501 Toomey Road
	<br>Austin, TX 78704
	<br>512-974-7857
	</span>
</div>
<div class="page-counter">
	Page <span class="page-number"></span>
</div>

Rest of Headers

Same as code above without the break-before:avoid styling to force the page breaks.

<div class="image-header-container">
	<span class="image-seal"></span>
	<span class="text-header">
	<span class="header-title">Transportation and Public Works Department</span>
	<br>Mobility Services
	<br>1501 Toomey Road
	<br>Austin, TX 78704
	<br>512-974-7857
	</span>
</div>
<div class="page-counter">
	Page <span class="page-number"></span>
</div>

The CSS

The image-header-container on line 17 has a break-before:page that inserts a page break before the header.

/********************************************/
/****** Print Header ************************/
/********************************************/
#kn-scene_65, #kn-scene_83 {
  counter-reset: page;
}
#kn-scene_65 .view-group, #kn-scene_83 .view-group {
  display: block; /* avoids text overlapping */
}

.image-header-container {
  display: block;
  align-items: flex-start;
  flex-direction: row;
  justify-content: center;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  break-before:page;
}

.image-seal {
  content:url("https://www.austintexas.gov/sites/default/files/images/Transportation/Home_Page_Gallery/2023%20Austin%20Transportation%20Public%20Works%20Branding%20Guide%2004.28.23_Color%20stack.png");
  width: 152px; 
  height: 113.324px;
  display: inline-block; 
  vertical-align: top;
  border-right: 3px solid #2B5EA0;
}

.text-header {
  justify-content: center;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  display: inline-block; 
  vertical-align: top; 
  margin-left: 10px;
}

.header-title {
  color: #2B5EA0;
  font-weight:lighter;
  font-size:1.5em;
}

/* Page Number Counter setup */
.page-counter {
  display:block;
  text-align: right;
  margin-top: 10px;
}

.page-counter .page-number::before {
  counter-increment: page;
  content: counter(page);
}