Formatting PDF printouts

Prince XML makes it possible to define the layout of the PDFs in CSS styles, so designing the printouts is as easy as designing any other page of your online store.

Below you will find the features of Prince XML that are often used in MyCashflow online stores. For more information about Prince XML features, see the program's website.

CSS styles

The printout layout is defined in CSS styles. If you define styles in a separate style file to which you refer with a <link> element, add a URL parameter to the reference destination address so that changes made to the file are updated every time a printout is loaded. For example:

<link rel="stylesheet" type="text/css" href="{ThemeUrl}/css/printables.css?version=123" />

If you want to be sure that changes are updated immediately, write the styles directly in the template file.

Fonts

In printouts, you can use the fonts of your choice by adding the fonts to the theme folder and referencing to them with the @font-face at-rule:

@font-face {
    font-family: "Font name";
    src: url("/files/THEMEFOLDER/fonts/font.ttf");
}

Setting the printout size

With Prince XML, you can define the printout size. It is especially useful when designing small size shipping labels.

The printout size is defined in the CSS @page at-rule:

@page {
    size: A5 landscape;
    margin: 0; padding: 0;
}

Using SVG graphics in printouts

SVG (scalable vector graphics) is an image file format that has many advantages over most commonly used images (e.g. JPG and PNG). Typically, SVG files are smaller in size and scalable, which means that they look equally accurate in any rendition.

SVG images can be created, for example, with Adobe Illustrator and Inkscape.

In MyCashflow printouts, you can use vector graphics in two different ways:

• By referring to an SVG image with the <img> element:

  <img src="{ThemeUrl}/i/graphics.svg"/>

• By using the HTML5 <svg> element, in which you can create graphics within the HTML file itself:

  <svg>
      <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="blue" />
  </svg>