Page Numbering

CobaltPdf exposes page numbers through Chromium's native header/footer tokens. You include the tokens in an HTML footer (or header) template, and Chromium substitutes the correct values when each page is printed.

Tokens

Token	Substituted with
`<span class='pageNumber'></span>`	Current page number (1-based)
`<span class='totalPages'></span>`	Total page count

Basic Page Numbering

string footer = """
    <div style="font-size:10px; width:100%; text-align:center; font-family:sans-serif;">
        Page <span class='pageNumber'></span> of <span class='totalPages'></span>
    </div>
    """;

var pdf = await renderer
    .WithFooter(footer)
    .RenderUrlAsPdfAsync("https://example.com");

pdf.SaveAs("numbered.pdf");

Right-Aligned Page Number

string footer = """
    <div style="font-size:9px; width:100%; text-align:right;
                padding-right:12px; font-family:Arial,sans-serif; color:#555;">
        <span class='pageNumber'></span> / <span class='totalPages'></span>
    </div>
    """;

var pdf = await renderer
    .WithFooter(footer)
    .RenderUrlAsPdfAsync("https://example.com/report");

Page Number in the Header

The pageNumber and totalPages tokens work in WithHeader too:

string header = """
    <div style="font-size:9px; width:100%; display:flex;
                justify-content:space-between; padding:0 12px;
                font-family:sans-serif; color:#333;">
        <span>My Report</span>
        <span>Page <span class='pageNumber'></span></span>
    </div>
    """;

var pdf = await renderer
    .WithHeader(header)
    .RenderUrlAsPdfAsync("https://example.com");

Background colours require -webkit-print-color-adjust: exact:

string footer = """
    <div style="
        font-size:9px; width:100%; text-align:center;
        background:#1a3c5e; color:white; padding:4px 0;
        -webkit-print-color-adjust:exact; font-family:Arial,sans-serif;">
        Page <span class='pageNumber'></span> of <span class='totalPages'></span>
    </div>
    """;

var pdf = await renderer
    .WithFooter(footer)
    .RenderUrlAsPdfAsync("https://example.com");

Combining with Date and Title

Other available tokens can accompany page numbers:

string footer = """
    <div style="font-size:9px; width:100%; display:flex;
                justify-content:space-between; padding:0 12px; font-family:sans-serif;">
        <span><span class='title'></span> — <span class='date'></span></span>
        <span>Page <span class='pageNumber'></span> of <span class='totalPages'></span></span>
    </div>
    """;

Additional token	Substituted with
`<span class='date'></span>`	Current date
`<span class='title'></span>`	Document `<title>` tag
`<span class='url'></span>`	Page URL

Styling Notes

Templates are rendered in an isolated Chromium context. Use inline styles — external stylesheets are not loaded.
Use width:100% on the outermost element to span the full page width.
Ensure the page margin is large enough to contain the footer. The default is 1 cm; increase it if the footer is clipped.
font-size is relative to the footer container, not the page body. Values around 9px–11px work well at A4 size.

Tip

For more header/footer options including watermarks, see the Headers, Footers & Watermarks article.

Table of Contents