Print

Introduction

Print templates are for printing PDFs. Common usecases are prints like posters, certificates, invitations or just a regular personalised letter. We use a 3rd party PDF generator called Flying Saucer. Refer to the User’s Guide when building print templates.

Also see W3C Recommendations on Paged Media.

You can use this print template with these template assets as a starting point.

  • Use CSS 2.1.
  • Use <table> for layout.
  • Use cm, mm or in as units on layout.
  • Use pt as units on text.
  • Use images with high DPI.
  • Use hex or RGB colors.
  • Convert hex colors to CMYK in @media print.

Restricting Template

Restrict the template to Print.

<meta name="agavailability" content="print">

Disable the template from selection.

<meta name="agavailability" content="inactive">

agavailability is required in the <head>.

Page Rules

Set rules for all pages with @page.

@page { 
   margin-top: 4cm;
   margin-right: 2cm;
   margin-bottom: 5cm;
   margin-left: 2cm;
}

See W3C Recommendations on @page.

Individual Page Rules

Define rules for the first with @page :first

@page :first {
   margin-top: 10cm
}

Define rules for the left (front) page with @page :left and the right (back) page with @page :right.

@page :left {
   margin-left: 3cm;
   margin-right: 4cm;
}
@page :right {
   margin-left: 3cm;
   margin-right: 4cm;
}

PDF Size & Orientation

Define the size and orientation of the PDF with size.

@page { 
   size: A4;
}

Custom Fonts

Embed custom fonts to the PDF with -fs-pdf-font-embed and -fs-pdf-font-encoding.

@font-face {
   font-family: 'Custom Font';
   src: url(../resources/templates/print/default/fonts/font-file.otf);
   -fs-pdf-font-embed: embed;
   -fs-pdf-font-encoding: Identity-H; 
}

Font files are required to be .otf or .ttf.

font-weight:bold and <b> on text with custom font will not render properly.

Predefined Margin Areas

top-left-corner top-left top-center top-right top-right-corner
left-top right-top
left-middle right-middle
left-bottom right-bottom
bottom-left-corner bottom-left bottom-center bottom-right bottom-right-corner

These areas are not visible in the Agillic editor. They only exists on print.

Running Header & Footer

Define an element(id) in the predefined margin area.

@page {
   @top-center {
      content: element(header);
   }
   @bottom-center {
      content: element(footer);
   }
}

The PDF generator places the element with id="header" in the top-center area and an element with id="footer" in the bottom-center area.

Define an element as a running element.

<head>
   <style>
      @page {
         @top-center {
            content: element(header);
         }
         @bottom-center {
            content: element(footer);
         }
      }
      #header {
         position: running(header);
      }
      #footer {
         position: running(footer);
      }
   </style>
</head>
<body>
   <div id="header">Header</div>
   <div id="footer">Footer</div>
   <div id="content">Content</div>
</body>

The PDF generator inserts #header and #footer on all pages.

Running elements are required to be immediate siblings. Otherwise subsequent siblings will not appear on the first page.

Page-Based Counter

Define a counter(page) in the predefined margin area.

@page {
   @bottom-right {
      content: counter(page);
   }
}

The PDF generator inserts a page counter in the bottom-right page area.

Page Breaks

Set rules for page-break-before, page-break-inside and page-break-after

.block {
   page-break-inside: avoid;
}

See W3C Recommendations on Page breaks.