Place any content: Preparation

As a particularly widespread and powerful “page description language”, HTML is ideal for flexibly specifying additional content for pages in a PDF file. The specific options provided by pdfToolbox (e.g. when defining CMYK colors) help to compensate for the language’s limitations. When placing objects on PDF pages, however, you can free yourself of the basic principles which apply on the Web. For example, unlike HTML in a Web environment, tables and absolute positioning are not a problem for HTML for PDF.

There are also some default settings for HTML and especially for CSS which are not always intuitive or desirable for PDFs. This article therefore describes a number of preparatory tricks for setting up user-defined content-placing Fixups. These tricks generally also use ready-made Fixups (such as placing color bars).

The tips given here are based on the HTML templates, or more precisely on specific CSS conditions. You can use any text editor to create or edit the styles.css file.

“Sublime Text” (available for Mac OS, Windows and Linux) is particularly well suited to the pdfToolbox environment, as it works well when displaying folders and PDF files.

Adding helpful code-based instructions to styles.css with a text editor

Customizing default margins and padding

All of the following optimizations relate to element display as adapted to place content and can be found in one of the referenced CSS files such as styles.css.

Many HTML elements use pre-specified margins and padding. This results in e.g. element positioning always maintaining a given distance between elements. In order to avoid this outcome and to ensure predictable results, change any margin or padding values in the CSS from “greater than 0” to “0”.

The following CSS code will set all margin and padding values to 0:

* {
margin: 0;
padding: 0; 
}

(* is the universal CSS selector) 

Set background color to transparent

The default background color in HTML is white, specifically RGB-white; this is not desirable when printing PDFs.

Such a background is generally undesirable when placing HTML objects. The code for this is as follows:

* {
background-color: transparent; 
}

A theoretically identical but somewhat more precise option is to only set the body background to transparent:

body {
     background-color: transparent;
}

As a rule, both options will lead to the same results.

The size of the box

Each HTML element is a box which - as described above - is somewhat larger than the actual element due to margins and padding.

All width and height values given in the CSS relate only to the element itself; additional margins and padding are not taken into account. When working with print content, however, it is often desirable to specify these details for the entire element including padding, line strength and margins. This is naturally only necessary if these details for this element have not been set to 0 as described above.

To avoid having to calculate the desired width and height values, you can add a suitable instruction to the CSS.

The CSS code is as follows:

* { 
     box-sizing: border-box;
  }

This application will again apply to all elements on an HTML page.

As a result, the height and width values will be measured for the entire border box including margins and padding.

Example with ready-made HTML templates

The following zip file contains a number of relevant HTML templates that can be downloaded and used as reference/examples:

Allowing pdfToolbox to access the “HTMLTemplates” folder

Extract the downloaded ZIP file and open pdfToolbox.

Under Fixups, you can create a new Fixup from the flyout menu. Select the “Place content on page” Fixup. From the “Folder” drop-down menu, you can select “Open folder with configuration files”.

Move or copy folders 01 to 09 from the previously unpacked “HTMLTemplates” folder to this location. These folders contain ready-made CSS styles, scripts and much more.

Files in “HTMLTemplates”

As mentioned in the introduction, Sublime Text is an ideal text editing application. To see an overview of the files and the folder structure, drag the desired folder into the Sublime Text window.

Selected files in Folder 01

styles.css contains all lines of code which may be helpful with preparation (padding and margins set to “0”; Box-Sizing = Border-Box to more easily calculate placements and a transparent background).

The most interesting part of index.html is the body section: The text “Penguins” is located here and will be placed within the current open PDF when the Fixup is run.

Create and run Fixup

  • Create a new Fixup as usual.
  • Select the “Place content on page” Fixup type.
  • Under Folder, select Folder 01.
  • Save the Fixup under a suitable name and click OK

Tip: In order to clearly see that pdfToolbox places a PDF in DIN A4 format within the open PDF document by default, choose a PDF in a format larger than A4 for editing.

Select the new Fixup and start it.

Depending on the placing parameters you selected in the pdfToolbox dialog (bottom left, top right, middle, etc. as well as frames of reference like CropBox, TrimBox, etc.), the text “Penguins” (upper left within the internally provided DIN A4 page) will be added to the open PDF.

Placed in three locations: In this image, “Penguins” has been added to an A3-size PDF document (plus first cut and info area) at the bottom left, in the middle and at the top right relative to the CropBox.

The green area showing the internally used A4 page has been added later to clarify the image.

Important: As you by now know that the "Place Content" fixup in callas pdfToolbox uses an HTML file and converts it to PDF. This gives you a lot of liberty in how to structure your HTML, in how you link to other files such as scripts, CSS and fonts and in how to structure the folder you use to hold that template. We have a template folder on GitHub where you find one possible way to do this. You'll find a liberal use of sub folders and CSS and Javascripts that are referred to, rather than included in the HTML file. You're free to follow this standard or implement your own.