Compose Enterprise is going through a design update. The illustrations on this page might be of the old design, but the information is up to date. Thank you for your patience during this update!

Creating your own PDF skin is a great way to customize your PDF generation without having to create PDF templates for every service you run. Here are the topics of this documentation:

1 PDF generation
- 1.1 Debug CSS in Chrome
2 Customizing the PDF skin
- 2.1 Fonts
- 2.2 @page Media – Width and Margins
- 2.3 Placeholders
- 2.4 Page Numbers
- 2.5 Logos, Images and Watermarks
  - 2.5.1 Image logo
  - 2.5.2 Font logo
  - 2.5.3 Logo in header
  - 2.5.4 Watermarks

PDF generation

Compose uses the OpenHTMLtoPDF library to generate PDFs, which is based on Flying Saucer. This tool allows us to style the PDF with the CSS 2.1 Page media user agent. You can find very useful documentation to understand the logic and how to personalize your PDF document in the following links:

Debug CSS in Chrome

It is not necessarily equally intuitive to debug a PDF skin in a browser compared to workflow skins. Luckily, there is a neat preview function in the Form Builder. Enter the Preview menu and choose the PDF option in the Layout dropdown. Then, check the show markup instead of generating PDF check box to get a preview of the HTML structure.

As you launch the preview, you’ll see a nearly identical rendition of your PDF.

Note: You may experience some variation between this preview and the final PDF generated in the workflow. To avoid this variation, open the Chrome DevTools, either by right-clicking the site and clicking Inspect or by shortcut Ctrl+Shift+I, and click the dots icon in the right upper corner of the DevTools. Navigate to More tools, choose Rendering, scroll down to Emulate CSS media type and select print.

Refresh the page, and you should be able to see and interact with an accurate HTML version of the PDF. Now you can view, debug and edit the CSS of your PDF skin, as you would for workflow skins. Firebug is a decent debugging tool alternative in Firefox.

Customizing the PDF skin

For the PDF skin, the same styling methods as for workflow skins apply. Take a look at the Bootstrap theme documentation to see how you style form content. Underneath are some specific pieces of CSS code for different implementations for your PDF.

Fonts

You can embed fonts in your PDF by including .ttf-files in your skin. In the case below, the fonts are all located in a separate folder in the skin with the name “fonts”. Add the fonts of your choosing (normal, italic, bold, bold-italic etc.) and add the font to the PDF by referencing their destination (src: url(“fonts/arial.tff”):

@font-face {
  font-family: "Arial";
  src: url("fonts/arial.ttf"); 
  -fs-pdf-font-embed: embed;  
  -fs-pdf-font-encoding: Identity-H;
}

@page Media – Width and Margins

You’ll find additional information about the @page media at http://www.w3.org/TR/css3-page. The @page media (@page{}) in the CSS sheet is where you style the layout of the pages and add content. Here is an example of the @page media with settings for the page width and margins:

@page {
	width: 100%;
	margin: 40pt 30pt 50pt 40pt !important;
}

Placeholders

To add recurring content across all PDF pages, you must designate the content to existing placeholders around the page margins in the @page media. Logos, images, page numbers, headers, footers etc. can be included in these areas (placeholders) in the PDF. There are 16 available placeholders:

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

In the following sections are some examples of the content you can add to the placeholders.

Page Numbers

Easily add page numbers to one of the placeholders in your PDF.

@page {
  @bottom-right-corner {
    	font-family: "Arial";
    	content: "" counter(page);
    	font-size: 0.8em;
  }
}

Logos, Images and Watermarks

Image logo

Add the logo image to a folder in your skin (in this case the folder “img”). The logo is added to the placeholder for the top-right corner. It is recommended to use a image file with a resolution of at least 300 dpi to avoid getting a pixelated image. Adjust the size of the logo with width and height attributes.

@page {

  @top-right-corner{  
    content: "";
    background-image :url(../../img/logo-600.jpg);
    background-repeat: no-repeat;
    background-position: -4pt top;
    width: 100%;
    height: auto;
  }
  
}

Font logo

A logo can be added as a font. You just need to create a font with the logo and upload the skin with the font inside the font folder.

@font-face {
    font-family: "MoreFontLogos";
    src: url("fonts/MoreFontLogos.ttf");
    -fs-pdf-font-embed: embed;
    -fs-pdf-font-encoding: Identity-H;
    font-weight: normal;
    font-style: normal;
}

@page {
  
  @top-right-corner{ 
    font-family: "MoreFontLogos";
    content: "b";
    color: #000000;
    font-size: 42pt;
    text-align: left!important;
    vertical-align: middle;
  }

}

Logo in header

There is an empty div where you can add a background logo for a header in your PDF:

.contentRow.topHeader .imageSpan.headerLogo {
	background-image:url(img/moreLogo2.png);
	background-repeat:no-repeat;
	display: inline-block;
    height: 60px;
    width: 200px;
}

Watermarks

A watermark is an image that will show at the background of every page. When you create your watermark, keep the color and dimensions in mind. Ideally the image should not interfere with the content of the PDF. It is therefore recommended to have a watermark with a non-aggressive color, say a shade of light grey (#eeeeee) with a transparent background.

The dimensions should be proportionate to the dimensions of an A4 page (2480px*3508px at 300DPI). The optimal format for your watermark file is .tif, but .gif, .png, and .bmp will also do. A high DPI results in a higher resolution, but try to avoid a large file size to avoid creating PDFs with unnecessary large file sizes.

Add the watermark image to every page with the following CSS code:

@page {
            background: url("img/logo-pdf-big.bmp");
            background-repeat: no-repeat;
}

It is also necessary to set the default white background to transparent:

.printWrapper.singlePageWrapper table.pageQuestionsWrapper,
table > tbody > tr, table > tbody > tr > td,
.contentRow.questionsGroup > table {  
background-color: transparent !important;
}

PDF skins