> For the complete documentation index, see [llms.txt](https://atd-dts.gitbook.io/atd-knack-operations/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://atd-dts.gitbook.io/atd-knack-operations/knack-code/code-knack-print-page/print-header-with-page-break-number.md).

# Print Header with Page Break/Number

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

<figure><img src="/files/5ewAd7cTxtGfj11uxhUF" alt=""><figcaption><p>Header design example</p></figcaption></figure>

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](https://developer.mozilla.org/en-US/docs/Web/CSS/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.

{% code lineNumbers="true" fullWidth="true" %}

```html
<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>
```

{% endcode %}

### Rest of Headers

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

{% code lineNumbers="true" fullWidth="true" %}

```html
<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>
```

{% endcode %}

## The CSS

The image-header-container on line 17 has a `break-before:page` that inserts a page break before the header.&#x20;

{% code lineNumbers="true" fullWidth="true" %}

```css
/********************************************/
/****** 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);
}
```

{% endcode %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://atd-dts.gitbook.io/atd-knack-operations/knack-code/code-knack-print-page/print-header-with-page-break-number.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.